:root{--ink:#182b60;--blue:#284ed6;--paper:#f7f9fc;--line:#dce2ed}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:white;font-family:Arial,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;font-size:1.0625rem;line-height:1.85;word-break:keep-all}a{color:inherit;text-decoration:none}a:hover{text-decoration:underline}a:focus-visible,summary:focus-visible{outline:3px solid #4f75ff;outline-offset:5px}.preview{background:var(--ink);color:white;text-align:center;padding:7px 16px;font-size:0.875rem}header{max-width:1320px;margin:auto;display:flex;justify-content:space-between;align-items:center;padding:27px 5%;border-bottom:1px solid var(--line);gap:30px}.brand{font-weight:800;font-size:1.5rem;letter-spacing:-1px;line-height:1.2}.brand span{display:block;font-size:0.8125rem;font-weight:400;letter-spacing:2px;margin-top:9px}nav{display:flex;gap:30px;align-items:center;font-size:0.9375rem}.navcta{border:1px solid var(--ink);padding:8px 22px;border-radius:3px}.hero{max-width:1320px;margin:auto;padding:85px 5% 110px;display:grid;grid-template-columns:1.4fr 1fr;gap:8%;align-items:center}.eyebrow{letter-spacing:2px;font-size:0.8125rem;font-weight:700;margin-bottom:28px}h1{font-size:clamp(38px,4.8vw,68px);line-height:1.25;letter-spacing:-3px;font-weight:650;margin:20px 0 30px}h1 em{font-style:normal;color:var(--blue)}.hero p{max-width:560px;font-size:1.0625rem;color:#465575}.hero p strong{color:var(--ink)}.button{display:inline-flex;gap:40px;align-items:center;background:var(--ink);color:white;padding:15px 23px;margin:20px 0;border-radius:3px;font-size:1.0rem}.button span{font-size:1.375rem}.lesson{background:var(--ink);color:white;padding:44px 40px;box-shadow:20px 20px 0 #eef2fc;border-radius:3px}.lesson>span{font-size:0.9375rem;color:#c6d0ec}.lesson>strong{display:block;font-size:clamp(40px,5.5vw,76px);letter-spacing:-3px;line-height:1.15;margin:45px 0;color:#fff}.lesson hr{border:0;border-top:1px solid #5b6b94}.lesson p{color:white}.lessonrow{display:flex;justify-content:space-between;font-size:0.875rem;gap:15px;border-bottom:1px solid #3a4c7d;padding:15px 0}.lesson a{display:block;margin-top:30px;font-size:0.9375rem}.editorial{display:grid;grid-template-columns:1fr 3fr;gap:5%;padding:75px max(6%,calc((100% - 1180px)/2));border-top:1px solid var(--line)}.editorial:nth-child(even){background:var(--paper)}.sectionlabel{font-size:0.875rem;color:#687797;padding-top:8px}.editorial h2,article h2{font-size:1.8125rem;line-height:1.5;letter-spacing:-1px;margin:0 0 25px}.editorial p{max-width:820px}.editorial ul{padding-left:22px}.editorial li{margin:15px 0}p{margin:16px 0}.pagetop{background:var(--paper);padding:65px max(6%,calc((100% - 1000px)/2))}.pagetop h1{font-size:3.0rem}article{max-width:880px;margin:60px auto 100px;padding:0 24px}article h2{margin-top:60px}article h2:first-child{margin-top:0}article p{color:#3e4d6a}article li{margin:14px 0}details{border-bottom:1px solid var(--line);padding:22px 0}summary{cursor:pointer;font-weight:600;font-size:1.25rem}details p{padding-left:20px}.tablewrap{overflow-x:auto}table{border-collapse:collapse;width:100%;font-size:1.0rem;margin:30px 0}td{border-bottom:1px solid var(--line);padding:17px 14px;min-width:100px}td:first-child{background:var(--paper);width:26%;font-weight:600}button{font:inherit;padding:16px 35px;background:#e8ecf3;color:#65718b;border:0;border-radius:3px}footer{background:var(--ink);color:white;padding:55px 6%;display:grid;grid-template-columns:1fr 1fr;gap:30px}footer div{display:flex;gap:25px;font-size:0.875rem}footer p{color:#c0cbe2;font-size:0.875rem;grid-column:1/-1} @media(max-width:760px){header{padding:22px 6%;display:block}.brand{font-size:1.3125rem}nav{margin-top:25px;gap:19px;font-size:0.875rem;flex-wrap:wrap}.navcta{padding:4px 12px}.hero{grid-template-columns:1fr;padding:45px 6% 65px;gap:45px}h1{letter-spacing:-1.8px}.hero p{font-size:1.0rem}.lesson{padding:30px;box-shadow:10px 10px 0 #eef2fc}.lesson>strong{font-size:3.625rem;margin:30px 0}.editorial{grid-template-columns:1fr;padding:45px 6%;gap:18px}.editorial h2,article h2{font-size:1.5625rem}.pagetop{padding:40px 6%}.pagetop h1{font-size:2.25rem;letter-spacing:-1.5px}article{margin-top:40px}footer{grid-template-columns:1fr}footer div{flex-wrap:wrap}.preview{font-size:0.75rem}}

.skip{position:absolute;left:16px;top:-100px;background:white;padding:12px;z-index:20}.skip:focus{top:12px}.textlink{text-decoration:underline;text-underline-offset:4px}th{text-align:left;border-bottom:1px solid var(--line);padding:17px 14px;min-width:100px;background:var(--paper);width:26%}.hero>*,.editorial>*,footer>*{min-width:0}@media(max-width:760px){.lessonrow{flex-wrap:wrap}nav a{padding-top:6px;padding-bottom:6px}}

/* Keyboard focus and narrow-screen text resilience */
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
nav a[aria-current="page"]{text-decoration:underline;text-underline-offset:6px}
body{overflow-wrap:anywhere}h1{font-size:clamp(2.375rem,4.8vw,4.25rem)}
nav,footer div{min-width:0}a.button{max-width:100%;gap:1.5rem}
.tablewrap:focus-visible{outline-offset:2px}article ol{padding-left:1.6em}article ol li{padding-left:.35em}
@media(max-width:760px){.preview{font-size:.875rem}.brand span,.eyebrow{font-size:.875rem}}

/* Approved editorial sample: warm paper, quiet typography, fine rules. */
:root{--ink:#182b60;--blue:#3c5276;--paper:#f3f0e9;--line:#d9d6cd}
body{background:#faf8f3;color:var(--ink)}
header{padding-top:28px;padding-bottom:28px}
.brand{letter-spacing:.3px;font-weight:700}
h1{font-weight:500;line-height:1.38;letter-spacing:-1.8px}
.hero p,article p{color:#505b6b}
.eyebrow{color:#596575;font-weight:500}
.hero{padding-top:76px;padding-bottom:96px}
.hero p strong{font-weight:500}
.button{border-radius:2px}
.lesson{background:#1e3052;color:#f7f5ee;border-radius:2px;box-shadow:8px 10px 0 #e9e5db}
.lesson>span,.lessonrow{color:#d3d7e0}
.lesson>strong{font-family:Georgia,'Times New Roman',serif;font-weight:400;letter-spacing:0;line-height:1.2;color:#f7f5ee}
.lesson hr{border-color:#677182}.lessonrow{border-color:#4e5a70}.lesson p{color:#f7f5ee}
.editorial h2,article h2{font-weight:500;letter-spacing:-.6px;line-height:1.6}
.sectionlabel{color:#596575}
summary{font-weight:500;line-height:1.6}
footer{background:#1e3052}footer p{color:#d3d7e0}
@media(max-width:760px){.hero{padding-top:45px;padding-bottom:65px}.lesson{box-shadow:6px 7px 0 #e9e5db}h1{letter-spacing:-1.3px}}

/* Main page only: selected D wordmark, original artwork. */
header .brand-d{display:block;flex:0 0 auto;width:200px;max-width:100%}
header .brand-d .logo-crop{display:block;position:relative;overflow:hidden;width:100%;aspect-ratio:8/5;margin:0;line-height:1}
header .brand-d img{position:absolute;width:160%;max-width:none;height:auto;left:-30%;top:-38%;mix-blend-mode:multiply}
@media(max-width:760px){header .brand-d{width:176px}}

/* Compact home header, menu first and D wordmark at the right. */
header:has(.brand-d){display:flex;gap:24px;padding-top:16px;padding-bottom:16px}
header .brand-d{width:144px;margin-left:auto}
header:has(.brand-d) nav{flex:1;flex-wrap:wrap;margin-top:0;gap:24px}
@media(max-width:760px){header:has(.brand-d){gap:16px}header .brand-d{width:128px}header:has(.brand-d) nav{gap:6px 16px}}
@media(max-width:420px){header:has(.brand-d) nav{display:grid;grid-template-columns:1fr;gap:0}header:has(.brand-d) .navcta{justify-self:start}}

/* Keep the established layout; allow natural heading wraps on narrow screens. */
.title-break{display:block}
.skip{position:fixed;top:1rem;left:1rem;transform:translateY(calc(-100% - 2rem));max-width:calc(100vw - 2rem)}
.skip:focus{top:1rem;transform:none}
.preview{overflow-wrap:anywhere}
nav a,footer div a{min-height:44px;display:inline-flex;align-items:center}
.lesson a:focus-visible,footer a:focus-visible{outline-color:#fff}
h2[id]{scroll-margin-top:1.5rem}
.tablewrap thead th{color:var(--ink);font-weight:700}
@media(max-width:760px){.title-break{display:inline}.brand span,.eyebrow{letter-spacing:1px}}

/* Topic navigation uses the existing type and color system. */
.faq-topics ul{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;list-style:none;padding:0;margin:0 0 2rem}
.faq-topics a{min-height:44px;text-underline-offset:.25em}
article section+section{margin-top:2.5rem}

/* Shared compact D logo and comfortable mobile reading. */
header .brand-d{width:112px}
@media(max-width:760px){
 body{font-size:1.125rem;line-height:1.8}
 .hero p{font-size:1.125rem}
 nav,.preview,.brand span,.eyebrow,.sectionlabel,
 .lesson>span,.lessonrow,.lesson a,footer div,footer p{font-size:1rem}
 .button,button{font-size:1rem}
 summary{font-size:1.3125rem;line-height:1.6}
 table{font-size:1.125rem}
 header:has(.brand-d){padding-left:5%;padding-right:5%;gap:12px}
 header .brand-d{width:104px}
 .hero,.editorial,.pagetop,footer{padding-left:5%;padding-right:5%}
 article{padding-left:5%;padding-right:5%}
 details p{padding-left:0}
 .lesson{padding:24px}
 th,td{padding:14px 10px}
}