@font-face{font-family:Archivo;src:url(assets/Archivo-Variable.ttf) format("truetype");font-weight:100 900;font-display:swap}
@font-face{font-family:Kontrapunkt;src:url(assets/Kontrapunkt-Light.otf)}
@font-face{font-family:ReferenceRoboto;src:url(assets/Roboto-Regular.ttf)}
:root{--navy:#203058;--ink:#253549;--muted:#46576b;--pale:#edf4fc;--line:#d5dfe9;--link:#174b91}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font:400 16px/1.55 Archivo,Arial,sans-serif;letter-spacing:.010em}button,input,select{font:inherit;letter-spacing:inherit}button,a{-webkit-tap-highlight-color:transparent}a{color:var(--link);text-underline-offset:4px}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #174b91;outline-offset:4px}.skip{position:absolute;left:18px;top:-80px;z-index:10;background:white;padding:14px}.skip:focus{top:10px}.masthead{background:var(--navy);color:white;display:flex;align-items:center;gap:36px;padding:23px 4vw;min-height:84px}.brand{display:flex;align-items:center;flex:none}.brand img{width:240px;max-width:40vw;height:auto;display:block}.masthead>span{font-size:14px;flex:1}.slash{padding:0 12px;color:#c8d7e7}.presentation-toggle{border:1px solid #a8bbd0;border-radius:5px;padding:8px 12px;background:none;color:white;font-size:13px;min-height:42px}.chapters{display:flex;gap:0;padding:0 4vw;border-bottom:1px solid var(--line);overflow-x:auto}.chapters a{padding:19px 18px;text-decoration:none;color:var(--muted);font-size:14px;white-space:nowrap;position:relative}.chapters a:first-child{padding-left:0}.chapters a[aria-current=page]{color:var(--navy);font-weight:600}.chapters a[aria-current=page]:after{content:"";position:absolute;bottom:0;left:18px;right:18px;height:3px;background:var(--navy)}.chapters a:first-child:after{left:0}.chapters .number{font-size:11px;margin-right:8px;color:#46576b}main{max-width:1600px;padding:36px 4vw 56px;margin:auto;min-height:calc(100vh - 220px)}.page-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:28px;margin-bottom:26px}.eyebrow{font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:var(--link);font-weight:600;margin:0 0 10px}h1{font-size:clamp(28px,3vw,42px);line-height:1.16;letter-spacing:0;font-weight:600;margin:0 0 12px;color:var(--navy)}.recommendation{margin:0;font-size:17px;max-width:850px;line-height:1.55;color:var(--muted)}h2{font-size:20px;font-weight:600;line-height:1.3;letter-spacing:0;margin:0 0 12px}h3{font-size:16px;margin:0 0 10px;font-weight:600}.tools{display:flex;justify-content:space-between;gap:20px;align-items:center;flex-wrap:wrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;margin-bottom:22px}.tool-group{display:flex;gap:5px;flex-wrap:wrap}.tools button,.text-action{display:inline-flex;justify-content:center;align-items:center;min-height:42px;padding:8px 14px;border:1px solid #7b8b9e;border-radius:5px;color:var(--navy);background:white;text-decoration:none;font-size:14px}.tools button[aria-pressed=true]{background:var(--pale);border-color:var(--navy);font-weight:600}.tools .text-action{background:var(--navy);color:white;border-color:var(--navy)}.compare{display:grid;grid-template-columns:minmax(0,1fr);gap:24px}.compare.side{grid-template-columns:repeat(2,minmax(0,1fr))}.example{min-width:0}.example-label{display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted);margin:0 0 12px}.example-label strong{color:var(--navy);font-size:15px;font-weight:600}.canvas{background:#f3f6f9;border:1px solid var(--line);border-radius:7px;overflow:hidden;width:100%;position:relative}.canvas iframe{display:block;border:0;background:white;transform-origin:top left}.canvas.context{height:auto}.canvas.panel{height:min(76vh,960px);overflow-y:auto;display:flex;justify-content:center;align-items:flex-start;padding:24px 0}.canvas.panel iframe{flex:none;max-width:100%}.canvas.panel.mail{background:#edf2f6}.canvas.panel.mobile iframe{width:320px!important;max-width:100%;border-left:1px solid var(--line);border-right:1px solid var(--line)}.notes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:25px;margin:25px 0}.notes p{border-top:1px solid var(--line);padding-top:13px;font-size:14px;color:var(--muted);margin:0}.notes strong{display:block;color:var(--navy);font-size:14px;margin-bottom:5px;font-weight:600}.footnote{font-size:12px;color:var(--muted);margin:18px 0 0;max-width:1100px}.direction-grid{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr);gap:45px}.type-sample{background:var(--pale);padding:36px;border-radius:7px;min-height:280px}.type-sample h2{font-size:38px;max-width:650px;line-height:1.15}.type-sample p{font-size:16px;line-height:1.6;letter-spacing:var(--tracking,0);color:#3f5064;max-width:64ch}.type-meta{font-size:13px!important;margin:22px 0 0}.specification{display:flex;gap:18px;flex-wrap:wrap;margin:18px 0;color:var(--muted);font-size:13px}.specification label{display:flex;align-items:center;gap:10px}.specification input{accent-color:var(--navy);width:140px}.specification select{background:#fff;border:1px solid #7b8b9e;border-radius:4px;padding:7px}.contrast-pair{border-bottom:1px solid var(--line);padding:16px 0;display:grid;grid-template-columns:30px 1fr auto;gap:13px;align-items:center;font-size:13px}.swatch{width:24px;height:24px;border-radius:50%;border:1px solid #7b8b9e}.contrast-pair strong{font-size:20px;white-space:nowrap;color:var(--navy)}.contrast-pair span small{display:block;font-size:11px;color:var(--muted)}.goals{padding:20px 0;border-top:1px solid var(--line);margin-top:24px}.goals p{font-size:14px;color:var(--muted);margin:0 0 12px}.goals b{color:var(--navy);font-weight:600}.sources{font-size:12px;color:var(--muted)}.reference-type{background:#fff;border:1px solid var(--line);margin-bottom:16px;padding:28px}.reference-type h2{font-family:Kontrapunkt;font-weight:400;font-size:30px}.reference-type p{font-family:ReferenceRoboto,Arial,sans-serif;color:#6c6f70}.reference-type .eyebrow{font-family:Archivo}.tag-demo{border:1px solid var(--line);border-radius:6px;padding:22px;margin-top:24px;max-width:900px}.tag-demo>p{font-size:13px;color:var(--muted);margin:0 0 14px}.tag-editor{display:flex;gap:8px;flex-wrap:wrap;align-items:center}.tag{display:inline-flex;align-items:center;gap:8px;background:#edf4fc;color:#294d77;font-size:13px;font-weight:600;border:1px solid #cbdcef;border-radius:4px;padding:4px 8px;line-height:1.5}.tag button{border:0;background:transparent;color:#294d77;min-width:28px;min-height:28px;padding:0;font-size:18px}.tag-form{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}.tag-form label{font-size:13px}.tag-form input{font-size:14px;min-height:42px;padding:8px 10px;border:1px solid #71849b;border-radius:4px}.tag-form button{min-height:42px;background:var(--navy);color:white;border:0;border-radius:5px;padding:8px 15px;font-size:14px}.tag-status{font-size:12px;color:var(--muted);min-height:20px;margin-top:8px}.icon-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px;margin-bottom:8px}.icon-intro>div{background:var(--pale);padding:20px 25px;border-radius:6px}.icon-intro p{font-size:14px;color:var(--muted);margin:0}.icon-table{display:grid;grid-template-columns:150px repeat(2,minmax(0,1fr));align-items:center}.icon-cell{border-bottom:1px solid var(--line);padding:20px 15px;min-height:116px}.icon-cell.category{font-size:14px;font-weight:600;color:var(--navy)}.icon-variants{display:flex;gap:32px;align-items:center;justify-content:center;height:80px}.icon-variants img{display:block;width:auto;object-fit:contain}.icon-variants img.pin{height:64px}.icon-variants img.circle{height:36px}.icon-size-label{text-align:center;font-size:11px;color:var(--muted)}.shared-icons{display:flex;gap:32px;align-items:center;flex-wrap:wrap;margin-top:22px;padding:20px 0;border-top:1px solid var(--line)}.shared-icons>div{display:flex;align-items:center;gap:12px;font-size:14px}.shared-icons img{width:34px;height:34px}footer{margin:0 4vw;display:flex;justify-content:space-between;gap:20px;border-top:1px solid var(--line);padding:18px 0;color:var(--muted);font-size:11px}body.focus .masthead{padding-top:12px;padding-bottom:12px;min-height:64px}body.focus .masthead>span{display:none}body.focus .chapters a{padding-top:12px;padding-bottom:12px}body.focus .recommendation,body.focus .notes,body.focus footer,body.focus .footnote{display:none}body.focus main{padding-top:22px}body.focus .page-heading{margin-bottom:16px}body.focus h1{font-size:30px;margin:0}body.focus .canvas.panel{height:calc(100vh - 260px)}[hidden]{display:none!important}@media(max-width:800px){.masthead{padding:18px 20px;gap:15px}.masthead>span{display:none}.presentation-toggle{margin-left:auto}.chapters{padding:0 20px}.chapters a{padding:15px 12px}main{padding:28px 20px}.compare.side,.direction-grid{grid-template-columns:1fr}.page-heading{align-items:flex-start}.notes{grid-template-columns:1fr;gap:14px}.type-sample{padding:24px}.type-sample h2{font-size:30px}.icon-table{grid-template-columns:100px repeat(2,minmax(0,1fr))}.icon-variants{gap:10px}.icon-variants img.pin{height:48px}.icon-variants img.circle{height:28px}.icon-cell{padding:15px 6px}.icon-intro{gap:12px}.icon-intro>div{padding:16px}.tools{gap:10px}.tools button{padding:8px 10px}.canvas.panel{justify-content:flex-start}footer{margin:0 20px}.direction-grid{gap:20px}}
body,body *{letter-spacing:.010em}h1,h2,h3,h4,h1 *,h2 *,h3 *,h4 *{letter-spacing:0}.navigation-audit{margin-top:28px;padding-top:22px;border-top:1px solid #d5dfe9}.navigation-audit h2{font-size:18px}.navigation-audit-pairs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:26px}.navigation-audit-pairs p{font-size:13px;color:#46576b}.navigation-audit-pairs strong{display:block;color:#203058;font-weight:600;margin-bottom:5px}@media(max-width:700px){.navigation-audit-pairs{grid-template-columns:1fr;gap:12px}}.canvas.panel.app-panel{height:clamp(760px,85vh,1000px);overflow:hidden;display:grid;grid-template-rows:minmax(0,1fr);justify-items:center;align-items:stretch}.canvas.panel.app-panel iframe{height:100%;min-height:0;width:auto;background:transparent;border-radius:14px}.canvas.panel.app-panel iframe[width="448"]{width:448px}.canvas.panel.app-panel iframe[width="576"]{width:576px}