/* Visual repair 20261102: geometry, readable typography and native-function spacing. */
:root{--vr-gap:20px;--vr-line:#8884}
html{scroll-padding-top:20px}body{overflow-wrap:break-word}
img{vertical-align:middle}button,input,select{font:inherit}
a:focus-visible,button:focus-visible,summary:focus-visible,input:focus-visible{outline:2px solid currentColor;outline-offset:4px}
.fn-search{max-width:1180px;align-items:stretch;margin:16px auto 12px;gap:10px}.fn-search input[type=search]{min-height:42px;padding:10px 14px}.fn-search button{min-height:42px;border-radius:8px;white-space:nowrap}
.fn-nativebar:empty,.fn-content:empty{display:none!important}
[class^=site-diy-]{max-width:1180px!important;margin:12px auto!important;padding:10px 14px!important;line-height:1.65!important;font-size:13px!important}
[class^=site-diy-]>strong{display:inline!important;margin-right:12px}[class^=site-diy-]>div{display:inline}
.new-main{margin-top:24px!important}.new-page{margin-top:24px!important}.new-main h1,.bt-detail h1{line-height:1.3;letter-spacing:-.02em}.new-main h2{line-height:1.4}
.fn-card-meta{margin-top:8px;gap:6px 10px;line-height:1.5;max-width:100%;clear:both}.fn-card-meta a{font-size:12px;opacity:.8}
.vr-card{min-width:0;max-width:100%;align-self:stretch}.vr-card>.fn-card-meta{grid-column:1/-1;flex-basis:100%}.vr-copy{min-width:0;flex:1}
a.vr-media{display:block;min-width:0}.vr-media img{display:block;max-width:100%;object-fit:cover}
.vr-card h3,.vr-card h4{line-height:1.45;margin-top:10px;margin-bottom:6px}.vr-card h3 a,.vr-card h4 a{color:inherit;text-decoration:none}
.vr-card p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;line-height:1.65;margin-top:8px;margin-bottom:10px}
[class*=hero]::after,[class*=slide]::after{pointer-events:none}
.bt-title{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.45;min-height:2.9em}
.bt-grid{row-gap:24px}.bt-grid p{line-height:1.65}.bt-heading{margin:24px 0 16px}.bt-frame{margin-top:24px}.bt-side{max-width:100%}
.vr-grid{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:24px 18px!important;align-items:start;list-style:none;padding:0!important;margin:0!important;width:100%!important}
.vr-list-card{display:flex!important;flex-direction:column;min-width:0;height:auto!important;width:auto!important;margin:0!important;padding:0!important;color:inherit}
.vr-list-cover{display:block;position:relative;aspect-ratio:2/3;overflow:hidden;border-radius:12px;background:transparent;isolation:isolate}
.vr-list-cover img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .2s}
.vr-list-cover:hover img{transform:scale(1.025)}.vr-list-title{font-size:15px!important;line-height:1.5!important;font-weight:650;margin:10px 0 0!important;min-height:3em}
.vr-list-title a{color:inherit;text-decoration:none;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.vr-list-meta{font-size:12px;opacity:.8;margin-top:6px;line-height:1.5}.vr-list-meta a{color:inherit;text-underline-offset:3px}
.new-page-title{font-size:clamp(24px,3vw,34px);line-height:1.25;margin:8px 0 24px!important}
.new-detail,.bt-detail{align-items:start;gap:28px}.new-detail>img,.bt-detail>img{display:block;max-width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:12px}
.new-detail h1,.bt-detail h1{font-size:clamp(25px,3vw,38px);margin:0 0 20px;overflow-wrap:anywhere}
.new-tags,.bt-tags{gap:8px;line-height:1.5}.new-tags a{display:inline-block;padding:5px 11px;border:1px solid var(--vr-line);border-radius:20px;color:inherit;font-size:13px;text-decoration:none}
.new-body,.bt-body,.fn-chapter-body{font-size:16px;line-height:1.9;max-width:100%;word-break:normal;overflow-wrap:anywhere}.new-body{border-top:1px solid var(--vr-line);padding-top:24px;margin-top:24px}.new-body p,.bt-body p{margin:0 0 1.15em}.new-body h2,.bt-body h2{margin:1.7em 0 .75em;font-size:24px}.new-body img,.bt-body img{display:block;max-width:100%;height:auto;margin:20px auto;border-radius:8px}
.bt-pages{gap:8px!important;align-items:center;margin:28px 0!important;line-height:1.5}.bt-pages ul{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:0;margin:0;list-style:none}.bt-pages li{margin:0;padding:0}.bt-pages a,.bt-pages>span{padding:8px 12px!important;border:1px solid var(--vr-line);border-radius:7px;color:inherit;text-decoration:none;max-width:100%}
.fn-links{padding:24px 0 8px;border-top:1px solid var(--vr-line);font-size:13px;line-height:1.8}.fn-links ul{gap:8px 18px}.fn-site-info{margin:12px 0;gap:12px 18px}
@media(max-width:1000px){.vr-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:600px){.vr-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:20px 14px!important}.vr-list-title{font-size:14px!important}.new-detail,.bt-detail{grid-template-columns:100px minmax(0,1fr);gap:16px}.new-detail h1,.bt-detail h1{font-size:23px}.new-tags a{padding:4px 8px;font-size:12px}.new-main{margin-top:18px!important}.fn-search{margin-top:12px}.fn-search button{padding:8px 14px}.new-body,.bt-body{font-size:15px}.bt-pages a{padding:7px 10px!important}}
@media(prefers-reduced-motion:reduce){.vr-list-cover img{transition:none}}

/* Preserve theme colours for links that have no explicit component colour. */
:where(.new-main,.new-page) a{color:inherit}
.fn-content{grid-column:1/-1;min-width:0}

.vof-nav{display:flex;flex-wrap:wrap;gap:20px;min-height:74px;padding:12px 0}.vof-nav .vof-brand{margin-right:auto;display:flex;align-items:center;gap:10px;font-size:20px;letter-spacing:0}.vof-brand .fn-logo{width:auto;height:32px;max-width:100px}.vof-intro{padding:0 0 20px}.vof-focus-copy p{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}@media(max-width:700px){.vof-nav{gap:12px}.vof-nav .vof-brand{width:100%}}

/* Phone readability: navigation and table rows retain every link/value. */
header a:has(.fn-logo){color:inherit}
@media(max-width:600px){
header a:has(.fn-logo){flex-shrink:0;white-space:nowrap;max-width:100%}
header nav:has(.fn-nav-item),header [class*="nav"]:has(>.fn-nav-item){flex-wrap:wrap!important;gap:10px 14px!important;width:100%;flex:1 1 100%;line-height:1.6;height:auto!important}
header .fn-nav-item{white-space:nowrap;flex-shrink:0}
header [class*="brand"]{flex-shrink:0;white-space:nowrap}
[data-new-slide] h1,[data-new-slide] h2{line-height:1.3!important;letter-spacing:0!important}
.new-main table:has(td[data-vr-label]){display:block;min-width:0!important;width:100%}
.new-main table:has(td[data-vr-label]) thead{display:none}
.new-main table:has(td[data-vr-label]) tbody{display:block;width:100%}
.new-main table:has(td[data-vr-label]) tr{display:flex;flex-wrap:wrap;gap:8px 14px;padding:16px 12px;border-bottom:1px solid #8884;width:100%}
.new-main table td[data-vr-label]{display:block;padding:0!important;border:0!important;font-size:13px;line-height:1.65;flex:1 1 28%;width:auto!important;word-break:normal}
.new-main table td[data-vr-label]:first-child{flex-basis:100%;font-weight:600}
.new-main table td[data-vr-label]:not(:first-child)::before{content:attr(data-vr-label) "：";opacity:.65}
.new-main table td[data-vr-label] a{word-break:normal;overflow-wrap:break-word}
}

@media(max-width:600px){
header :has(>nav),header :has(>[class*="nav"]){flex-wrap:wrap!important;height:auto!important;gap:12px!important;align-items:center;padding-top:8px;padding-bottom:8px}
header nav:has(.fn-nav-item),header [class*="nav"]:has(>.fn-nav-item){justify-content:flex-start!important}
}