:root{
--primary:#1d3557;--secondary:#a8dadc;--accent:#e63946;--bg:#f1faee;--surface:#ffffff;
--surface-alt:#f5f5f5;--text:#1a1a1a;--muted:#666666;--border:#d1dcd7;--row-alt:#eaf3e7;
--success:#2a9d8f;--danger:#c1121f;--radius:4px;
--font:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
*{box-sizing:border-box}
html{font-family:var(--font);font-size:16px;line-height:1.6;color:var(--text);background:var(--bg)}
body{margin:0}
a{color:var(--primary)}
img{max-width:100%;height:auto;display:block}
header{background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:10}
.header-inner{max-width:1120px;margin:0 auto;padding:12px 16px;display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.logo{display:inline-flex;align-items:center;text-decoration:none}
.logo img{width:44px;height:44px;object-fit:contain}
nav.primary ul{display:flex;flex-wrap:wrap;gap:4px;list-style:none;padding:0;margin:0}
nav.primary a{display:inline-block;padding:10px 12px;color:var(--primary);text-decoration:none;font-weight:600;border-radius:var(--radius);min-height:44px;font-size:.95rem}
nav.primary a:hover{background:var(--surface-alt)}
main{max-width:800px;margin:0 auto;padding:24px 16px 48px}
.hero{margin:0 0 32px}
.hero h1{font-size:1.75rem;line-height:1.2;margin:0 0 8px;color:var(--primary);letter-spacing:-.01em}
.byline{font-size:.9rem;color:var(--muted);margin:0 0 24px}
.byline strong{color:var(--text)}
.hero-body{display:grid;grid-template-columns:1fr;gap:20px}
.hero-image{aspect-ratio:3/2;overflow:hidden;border-radius:var(--radius);border:1px solid var(--border)}
.hero-image img{width:100%;height:100%;object-fit:cover}
.intro{font-size:1.05rem;margin:0 0 16px}
.chips{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:8px 0 0}
.chips li{padding:6px 12px;background:var(--surface-alt);border:1px solid var(--border);border-radius:999px;font-size:.85rem;color:var(--primary);font-weight:500}
nav.toc{background:var(--surface-alt);border:1px solid var(--border);border-radius:var(--radius);padding:16px 20px;margin:0 0 32px}
.toc-title{font-size:1rem;margin:0 0 8px;color:var(--primary);font-weight:700}
nav.toc ul{list-style:none;padding:0;margin:0}
nav.toc li{padding:4px 0}
nav.toc a{color:var(--primary);text-decoration:none;font-size:.95rem}
nav.toc a:hover{text-decoration:underline}
.body h2{font-size:1.4rem;line-height:1.3;margin:40px 0 12px;color:var(--primary);border-top:2px solid var(--accent);padding-top:16px}
.body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.body h3{font-size:1.15rem;margin:24px 0 8px;color:var(--text)}
.body p{margin:0 0 16px}
.body ul,.body ol{margin:0 0 16px;padding-left:24px}
.body li{margin:4px 0}
.body-illustration{aspect-ratio:1/1;overflow:hidden;border-radius:var(--radius);margin:16px 0;max-width:520px;border:1px solid var(--border)}
.body-illustration img{width:100%;height:100%;object-fit:cover}
.callout{background:var(--row-alt);border-left:3px solid var(--accent);padding:12px 16px;margin:16px 0;border-radius:var(--radius)}
.callout p{margin:0}
.table-wrap{overflow-x:auto;margin:16px 0}
.body table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:520px}
.body table th,.body table td{padding:10px 12px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top}
.body table th{background:var(--surface-alt);font-weight:600;color:var(--primary)}
.body table tr:nth-child(even) td{background:var(--row-alt)}
.faq details{border-bottom:1px solid var(--border);padding:8px 0}
.faq summary{cursor:pointer;font-weight:600;color:var(--primary);padding:12px 0;min-height:44px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"+";color:var(--accent);margin-right:8px;font-weight:700}
.faq details[open] summary::before{content:"−"}
.faq details[open] summary{color:var(--accent)}
.faq details p{margin:0 0 12px 20px}
.author-box{display:flex;gap:16px;align-items:flex-start;padding:20px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin:40px 0 24px}
.author-box img{aspect-ratio:1/1;width:80px;height:80px;border-radius:50%;object-fit:cover;flex:0 0 auto}
.author-name{margin:0 0 4px;font-size:1.1rem;font-weight:700;color:var(--primary)}
.author-box .role{margin:0 0 8px;font-size:.9rem;color:var(--muted)}
.author-box .bio{margin:0;font-size:.95rem}
footer{background:var(--primary);color:var(--surface);margin-top:48px;padding:32px 16px}
.footer-inner{max-width:1120px;margin:0 auto;display:grid;grid-template-columns:1fr;gap:24px}
.footer-inner .about p{margin:4px 0;font-size:.9rem}
.footer-inner nav.legal ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:12px}
.footer-inner nav.legal a{color:var(--secondary);text-decoration:none;font-size:.9rem;padding:8px 0;min-height:44px;display:inline-flex;align-items:center}
.footer-inner nav.legal a:hover{text-decoration:underline;color:var(--surface)}
.faq,.author-box,footer{content-visibility:auto;contain-intrinsic-size:0 400px}
@media(min-width:700px){
.hero h1{font-size:2.25rem}
.hero-body{grid-template-columns:1fr 1fr;align-items:center}
.hero-body .hero-image{order:-1}
main{padding:32px 16px 64px}
.body h2{font-size:1.6rem}
}
@media(min-width:960px){
.hero h1{font-size:2.5rem}
.header-inner{padding:16px 24px}
main{padding:40px 24px 80px}
.footer-inner{grid-template-columns:1fr 1fr}
.footer-inner nav.legal ul{justify-content:flex-end}
}

/* CSS-only mobile hamburger via checkbox+label (reliable across browsers) */
.menu-check{position:absolute;opacity:0;pointer-events:none;left:-9999px}
.menu-btn{display:inline-flex;align-items:center;justify-content:center;cursor:pointer;padding:10px 12px;min-height:44px;min-width:44px;color:var(--primary);font-size:1.5rem;line-height:1;border-radius:var(--radius);user-select:none}
.menu-btn:hover{background:var(--surface-alt)}
.menu-check:focus-visible~.menu-btn{outline:2px solid var(--primary);outline-offset:2px}
.header-inner nav.primary{display:none}
.menu-check:checked~nav.primary{display:block;position:absolute;right:16px;top:64px;min-width:220px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 6px 20px rgba(29,53,87,.12);padding:8px;z-index:20}
.menu-check:checked~nav.primary ul{flex-direction:column;gap:2px}
.menu-check:checked~nav.primary a{width:100%}
@media(min-width:700px){
.menu-btn{display:none}
.header-inner nav.primary{display:block !important;position:static !important;background:transparent !important;border:none !important;box-shadow:none !important;padding:0 !important;min-width:0}
.header-inner nav.primary ul{flex-direction:row}
}
/* FAQ h3-in-summary — visual reset so it renders inline with the toggle icon */
.faq summary h3{display:inline;margin:0;font-size:inherit;color:inherit;font-weight:inherit;line-height:inherit}