/* Shared visual language for every localized blog and article. */
body.editorial { --bg:#fbfaf8; --card:#fffefd; --ink:#302b38; --ink-soft:#706a76; --ink-faint:#776c80; --accent:#75598e; --accent-dark:#65467f; --accent-soft:#efe9f2; --line:#e8e3e9; --line-light:#f2edf4; --gradient-main:linear-gradient(120deg,#75598e,#9981ab); --radius:18px; background:var(--bg); }
.editorial h1,.editorial h2,.editorial h3,.editorial .logo { font-family:inherit; letter-spacing:-.025em; }
.editorial :focus-visible { outline:3px solid var(--accent); outline-offset:5px; }
.editorial .blog-nav { background:#fbfaf8f5; padding:18px 0; border-color:var(--line); backdrop-filter:blur(12px); }
.editorial .blog-nav .inner { max-width:1220px; padding-inline:28px; }
.editorial .blog-nav .logo { color:var(--ink); font-size:1.4rem; font-weight:600; }
.editorial .blog-nav .logo img { width:36px; height:36px; border-radius:11px; }
.editorial .blog-nav .dl-btn { background:var(--accent); box-shadow:none; border-radius:12px; padding:11px 22px; font-weight:500; }
.editorial .breadcrumb { max-width:1160px; color:var(--ink-faint); padding:24px 28px 0; line-height:1.9; }
.editorial .blog-index-hero { max-width:1160px; text-align:start; padding:64px 28px 36px; border-bottom:1px solid var(--line); }
.editorial .blog-index-hero h1 { font-size:clamp(2.5rem,5vw,4rem); font-weight:500; line-height:1.2; margin-bottom:20px; }
.editorial .blog-index-hero p { font-size:1.08rem; line-height:1.9; max-width:42em; }
.editorial .blog-grid-wrap { max-width:1160px; padding:40px 28px 80px; }
.editorial .blog-category { margin-bottom:64px; }
.editorial .blog-category > h2 { font-size:1.5rem; font-weight:500; color:var(--ink); padding:0 0 16px; border-bottom:1px solid var(--line); margin-bottom:28px; }
.editorial .blog-category > h2::before { display:none; }
.editorial .blog-card-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 40px; }
.editorial .blog-card { display:flex; flex-direction:column; gap:0; position:relative; padding:0 0 26px; border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; box-shadow:none; transition:color .2s ease; }
.editorial .blog-card:hover { transform:none; box-shadow:none; text-decoration:none; border-color:#cdbcd8; }
.editorial .blog-card.has-art { padding-inline-end:128px; }
.editorial .blog-card-art { position:absolute; inset-inline-end:0; top:0; width:104px; height:112px; overflow:hidden; border-radius:16px; background:#f0e9e2; }
.editorial .blog-card-art img { display:block; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.editorial .blog-card:hover img { transform:scale(1.025); }
.editorial .blog-card .card-tag { align-self:flex-start; padding:0; margin-bottom:10px; color:var(--accent-dark); background:none; border-radius:0; font-size:.78rem; font-weight:400; }
.editorial .blog-card h3,.editorial .blog-card h2 { color:var(--ink); font-size:1.24rem; font-weight:500; line-height:1.55; margin-bottom:12px; }
.editorial .blog-card:hover h3 { color:var(--accent-dark); }
.editorial .blog-card p { color:var(--ink-soft); font-size:.94rem; line-height:1.85; margin-bottom:20px; }
.editorial .blog-card .card-meta { margin-top:auto; color:var(--ink-faint); font-size:.78rem; }
.editorial .blog-lead.has-art { grid-column:1/-1; display:grid; grid-template-columns:1fr 1.15fr; grid-template-rows:1fr auto auto 1fr; gap:0 44px; padding:28px; border:1px solid var(--line); background:var(--card); border-radius:24px; }
.editorial .blog-lead .blog-card-art { position:static; grid-column:1; grid-row:1/5; width:100%; height:100%; min-height:300px; max-height:380px; border-radius:16px; }
.editorial .blog-lead .blog-card-art img { object-position:50% 10%; }
.editorial .blog-lead > :not(.blog-card-art) { grid-column:2; }
.editorial .blog-lead .card-tag { align-self:end; }
.editorial .blog-lead h3 { font-size:clamp(1.5rem,2.5vw,2.2rem); line-height:1.4; margin-bottom:18px; }
.editorial .blog-lead .card-meta { align-self:start; margin-top:0; padding-top:18px; border-top:1px solid var(--line); }
.editorial .article-wrap { max-width:1100px; padding:44px 28px 80px; }
.editorial .article-header { display:grid; grid-template-columns:1.25fr 1fr; gap:24px 44px; align-items:center; margin-bottom:42px; border-bottom:1px solid var(--line); padding:0 0 44px; }
.editorial .article-cover { grid-column:2; grid-row:1/4; width:100%; height:auto; aspect-ratio:1; object-fit:cover; border-radius:28px; }
.editorial .article-header h1 { font-size:clamp(2rem,3.2vw,3rem); font-weight:500; line-height:1.28; margin:0; align-self:end; }
.editorial .article-meta { font-size:.83rem; color:var(--ink-soft); align-self:start; gap:10px; }
.editorial .article-body { max-width:760px; margin-inline:auto; font-size:1.08rem; line-height:1.95; }
.editorial .article-lead { font-size:1.2rem; line-height:1.95; color:var(--ink-soft); }
.editorial .article-body h2 { font-size:1.65rem; font-weight:500; margin-top:48px; line-height:1.5; scroll-margin-top:110px; }
.editorial .article-body h2::before { width:32px; height:3px; background:#bda5d0; margin-bottom:18px; }
.editorial .article-body h3 { font-size:1.2rem; line-height:1.65; scroll-margin-top:110px; }
.editorial .article-body p,.editorial .article-body li { color:#544b5d; }
.editorial .article-body a { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.editorial .article-toc { background:#f0ecef; border:1px solid var(--line); padding:28px 32px; margin-block:30px 40px; }
.editorial .article-toc h2 { font-size:1.12rem; margin:0 0 14px; }
.editorial .article-toc h2::before { display:none; }
.editorial .article-toc a { text-decoration:none; }
.editorial .article-toc li { margin-bottom:10px; }
.editorial .table-wrap { border:1px solid var(--line); border-radius:20px; overflow-x:auto; margin-block:24px; }
.editorial table { border-collapse:collapse; width:100%; font-size:.95rem; }
.editorial .article-body th,.editorial table.article-table th { background:#eee7f3; color:var(--ink); padding:16px; text-align:start; border-bottom:1px solid #cfc1d8; }
.editorial .article-body td,.editorial table.article-table td { padding:15px 16px; border-color:var(--line); }
.editorial tr:nth-child(even) td { background:#f7f3f9; }
.editorial .tip-box,.editorial .info-box { background:#edf1e8; border-color:#a8b8a0; border-radius:18px; padding:25px; margin-block:28px; }
.editorial .warning-box { background:#f6ece4; border-color:#c3a68b; border-radius:18px; padding:25px; }
.editorial .cta-box { background:#eee7f3; border:1px solid #e1d5e8; border-radius:28px; padding:36px; margin-block:40px; }
.editorial .cta-box h3 { color:var(--ink); font-size:1.6rem; line-height:1.4; }
.editorial .cta-box .store-row a,.editorial .cta-box .store-badge-link { background:#fff; border-radius:8px; }
.editorial .faq-item { padding:25px 0; }
.editorial .related-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px; }
.editorial .related-card { border-radius:20px; padding:0 0 22px; overflow:hidden; }
.editorial .related-card > :not(.related-art) { margin-inline:22px; }
.editorial .related-art { aspect-ratio:1.7; margin-bottom:18px; }
.editorial .related-art img { width:100%; height:100%; object-fit:cover; }
.editorial .blog-footer { background:#302737; color:#e3d9ea; padding:44px 24px; border:0; }
.editorial .blog-footer a { color:#dbc4eb; }

/* Reading aids remain fully visible, including on touch and without JS. */
.editorial .related-card:not(:has(.related-art)) { padding:24px; }
.editorial .related-card:not(:has(.related-art)) > * { margin-inline:0; }
.compact-blog-index .article-wrap { max-width:1160px; }
.compact-blog-index .article-header { display:block; padding-bottom:32px; }
.compact-blog-index .article-header h1 { font-size:clamp(2.2rem,4vw,3.4rem); margin-bottom:20px; }
.compact-blog-index .related-grid { gap:28px 40px; }
.compact-blog-index .related-card { border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent; padding:0 0 26px; line-height:1.85; color:var(--ink-soft); }
.compact-blog-index .related-card .related-copy { margin:0; }
.compact-blog-index .related-copy strong { font-size:1.2rem; font-weight:500; line-height:1.55; color:var(--ink); }
.compact-blog-index .related-lead { display:grid; grid-column:1/-1; grid-template-columns:1fr 1.15fr; gap:36px; align-items:center; padding:28px; border:1px solid var(--line); border-radius:24px; background:var(--card); }
.compact-blog-index .related-lead .related-art { aspect-ratio:1.3; margin:0; border-radius:16px; overflow:hidden; }
.compact-blog-index .related-lead .related-copy { line-height:1.9; }
.compact-blog-index .related-lead strong { font-size:clamp(1.5rem,2.5vw,2rem); }
.editorial .article-toc { border-radius:18px; }
.editorial .article-toc ol { columns:2; column-gap:40px; }
.editorial .article-toc li { break-inside:avoid; }
.editorial .article-body .info-box { padding-top:38px; }
.editorial .article-body .warn-box { background:#f6ece4; border-color:#c3a68b; border-radius:18px; }
.editorial .article-meta,.editorial .article-body { overflow-wrap:break-word; }
@media(max-width:900px) {
 .editorial .blog-card-grid { gap:24px; }
 .editorial .blog-card.has-art { padding-inline-end:100px; }
 .editorial .blog-card-art { width:82px; height:92px; }
 .editorial .blog-lead.has-art { padding:24px; column-gap:28px; }
}
@media(max-width:600px) {
 .compact-blog-index .related-lead { display:block; padding:0 0 24px; }
 .compact-blog-index .related-lead .related-art { border-radius:0; margin-bottom:24px; }
 .compact-blog-index .related-lead .related-copy { margin-inline:24px; }
 .editorial .blog-nav .inner { padding-inline:18px; gap:12px; } .editorial .blog-nav .logo { font-size:1.15rem; }
 .editorial .blog-nav .dl-btn { padding:10px 13px; font-size:.8rem; }
 .editorial .breadcrumb { padding:22px 20px 0; font-size:.8rem; }
 .editorial .blog-index-hero { padding:40px 22px 28px; }
 .editorial .blog-index-hero h1 { font-size:2.65rem; } .editorial .blog-index-hero p { font-size:1rem; }
 .editorial .blog-grid-wrap { padding:30px 20px 55px; } .editorial .blog-card-grid { grid-template-columns:1fr; gap:26px; }
 .editorial .blog-category { margin-bottom:40px; }
 .editorial .blog-card { padding-bottom:26px; }
 .editorial .blog-card.has-art { display:grid; grid-template-columns:1fr 84px; gap:0 18px; padding-inline-end:0; }
 .editorial .blog-card-art { position:static; grid-column:2; grid-row:1/3; width:84px; height:96px; }
 .editorial .blog-card .card-tag,.editorial .blog-card h3 { grid-column:1; }
 .editorial .blog-card p,.editorial .blog-card .card-meta { grid-column:1/-1; }
 .editorial .blog-card h3 { font-size:1.18rem; } .editorial .blog-card p { font-size:.95rem; }
 .editorial .blog-lead.has-art { display:flex; padding:0 0 24px; gap:0; overflow:hidden; }
 .editorial .blog-lead .blog-card-art { width:100%; height:230px; min-height:0; margin-bottom:24px; border-radius:0; }
 .editorial .blog-lead > :not(.blog-card-art) { margin-inline:24px; }
 .editorial .blog-lead .card-tag { align-self:flex-start; } .editorial .blog-lead h3 { font-size:1.55rem; }
 .editorial .blog-lead .card-meta { align-self:stretch; }
 .editorial .article-wrap { padding:30px 20px 55px; } .editorial .article-header { grid-template-columns:1fr; gap:22px; padding-bottom:30px; }
 .editorial .article-header h1 { font-size:2rem; } .editorial .article-cover { grid-column:1; grid-row:3; width:100%; aspect-ratio:1.4; margin:0 auto; border-radius:22px; }
 .editorial .article-body { font-size:1.02rem; } .editorial .article-body h2 { font-size:1.45rem; }
 .editorial .article-toc { padding:24px; } .editorial .article-toc ol { columns:1; }
 .editorial .cta-box { padding:28px 20px; } .editorial .related-grid { grid-template-columns:1fr; }
 .editorial table { display:block; overflow-x:auto; max-width:100%; } .editorial .article-body th,.editorial .article-body td { padding:12px; }
}
@media(prefers-reduced-motion:reduce) { .editorial *, .editorial *::before { transition:none !important; animation:none !important; scroll-behavior:auto !important; } }
