:root { --ink:#3c1d16; --muted:#78513f; --paper:#fffaf2; --canvas:#fffaf2; --line:#e7cbb7; }
body { background:var(--paper); line-height:1.75; }
a { text-underline-offset:4px; }
a:hover { color:#a33c16; }
a:focus-visible { outline:3px solid #a33c16; outline-offset:5px; border-radius:2px; }
.skip { position:absolute; top:-100px; left:16px; z-index:2; background:var(--paper); padding:12px; }
.skip:focus { top:8px; }
.site-header,.site-footer,main { width:min(1120px,calc(100% - 48px)); margin-inline:auto; }
.site-header { display:flex; align-items:center; gap:28px; min-height:96px; border-bottom:1px solid var(--line); }
.wordmark { display:flex; align-items:center; gap:10px; font-size:24px; font-weight:800; text-decoration:none; }
.wordmark img { border-radius:9px; }
.guide-link { font-size:14px; font-weight:650; }
.languages { margin-left:auto; display:flex; gap:16px; font-size:13px; flex-wrap:wrap; }
.languages a { padding-block:12px; text-decoration:none; }
.languages [aria-current] { text-decoration:underline; font-weight:750; }
.blog-intro { padding-block:80px 52px; max-width:800px; }
.eyebrow { color:var(--muted); font-size:13px; font-weight:700; margin:0 0 16px; letter-spacing:.025em; }
h1 { font-size:clamp(34px,5.2vw,62px); line-height:1.18; letter-spacing:-.045em; margin:0 0 24px; }
h2 { line-height:1.4; letter-spacing:-.025em; }
html[lang="ja"] :is(h1,h2,h3,h4) { word-break:normal; overflow-wrap:anywhere; line-break:strict; }
.lede { font-size:clamp(18px,2vw,21px); line-height:1.8; color:var(--muted); max-width:65ch; }
.article-list { border-top:1px solid var(--line); }
.article-card { display:grid; grid-template-columns:56px 1fr 36px; gap:28px; border-bottom:1px solid var(--line); padding:36px 0; }
.article-number { color:var(--muted); padding-top:3px; font-size:14px; font-variant-numeric:tabular-nums; }
.article-card .eyebrow { margin-bottom:8px; }
.article-card h2 { margin:0 0 12px; font-size:clamp(22px,2.5vw,30px); max-width:38ch; }
.article-card h2 a { text-decoration:none; }
.article-card h2 a:hover { text-decoration:underline; }
.article-card p:last-child { margin:0; color:var(--muted); max-width:70ch; }
.card-arrow { align-self:center; font-size:30px; }
.editorial { max-width:760px; padding-block:64px 80px; font-size:15px; color:var(--muted); }
.editorial h2 { color:var(--ink); }
.breadcrumbs { display:flex; flex-wrap:wrap; gap:12px; padding-block:28px; font-size:13px; color:var(--muted); }
.guide { max-width:760px; margin:24px auto 64px; }
.guide h1 { font-size:clamp(32px,4.3vw,52px); }
.byline { font-size:13px; color:var(--muted); }
.answer { background:#ffebd4; border-left:4px solid #c25b2b; margin-block:32px; padding:24px 28px; }
.answer h2 { font-size:16px; margin:0 0 8px; }
.answer p { margin:0; font-size:18px; }
.contents { margin-block:32px 48px; padding-bottom:24px; border-bottom:1px solid var(--line); font-size:15px; }
.contents ol { padding-left:24px; }
.contents li { margin-block:8px; }
.prose { scroll-margin-top:24px; margin-block:44px; font-size:18px; line-height:1.95; }
.prose h2 { font-size:27px; margin:0 0 20px; }
.prose h3 { font-size:20px; line-height:1.6; margin-top:30px; }
.prose p { margin-block:16px; }
.prose li { margin-block:12px; padding-left:4px; }
.sources { border-top:1px solid var(--line); padding-top:24px; color:var(--muted); font-size:14px; overflow-wrap:anywhere; }
.sources h2 { font-size:20px; color:var(--ink); }
.download { margin-top:48px; padding:32px; background:#ffe5a5; }
.download h2 { margin-top:0; font-size:25px; }
.button { display:inline-block; padding:12px 20px; background:var(--ink); color:#fffaf2; border-radius:6px; font-weight:650; text-decoration:none; }
.button:hover { background:#773820; color:white; }
.related { margin-bottom:64px; }
.related>h2 { font-size:24px; }
.site-footer { border-top:1px solid var(--line); display:flex; flex-wrap:wrap; justify-content:space-between; gap:24px; padding-block:28px 40px; font-size:13px; color:var(--muted); }
.site-footer nav { display:flex; flex-wrap:wrap; gap:20px; }
@media(max-width:600px) {
  .site-header, .site-footer, main { width:calc(100% - 36px); }
  .site-header { flex-wrap:wrap; gap:8px 20px; padding-block:18px; }
  .languages { width:100%; margin-left:0; gap:24px; }
  .guide-link { margin-left:auto; }
  .blog-intro { padding-block:48px 32px; }
  .article-card { grid-template-columns:26px 1fr; gap:12px; padding-block:28px; }
  .card-arrow { display:none; }
  .guide { margin-top:12px; }
  .answer { padding:20px; }
  .prose { font-size:17px; }
  .prose h2 { font-size:24px; }
  .download { padding:24px; }
}
@media(prefers-reduced-motion:reduce) { * { scroll-behavior:auto!important; } }