:root{--paper:#fbfaf7;--sheet:#fff;--ink:#111;--muted:#5b5a56;--rule:#e2ded5;--c:#00a3e0;--m:#e5007d;--y:#ffe100;--yd:#b59d00;--k:#111;--max:1160px;--font:"Helvetica Neue",Helvetica,Arial,"Nimbus Sans","Liberation Sans",system-ui,sans-serif;--serif:Georgia,"Times New Roman",serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:17px/1.65 var(--font)}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 22px}
.skip{position:absolute;left:-999px}.skip:focus{left:12px;top:12px;background:#fff;padding:8px 12px;z-index:10}
.colorbar{height:8px;background:linear-gradient(90deg,var(--c) 0 12.5%,var(--m) 12.5% 25%,var(--y) 25% 37.5%,var(--k) 37.5% 50%,#7fd1ef 50% 62.5%,#f27fbe 62.5% 75%,#fff080 75% 87.5%,#888 87.5% 100%)}
.top{background:var(--paper);border-bottom:1px solid var(--ink);position:sticky;top:0;z-index:5}
.top-inner{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:72px}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);margin:0}
.regmark{flex:none;color:var(--ink)}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.wordmark{font-weight:800;font-size:1.55rem;letter-spacing:-.04em;display:inline-flex;align-items:flex-end;gap:3px}
.wordmark i{display:inline-block;width:7px;height:7px;border-radius:50%;margin-bottom:7px}
.wordmark i.dc{background:var(--c);margin-left:2px}.wordmark i.dm{background:var(--m)}.wordmark i.dy{background:var(--y)}
.brand small{font-size:.74rem;color:var(--muted);letter-spacing:.02em;margin-top:3px}
.mainnav{position:relative}
.navtoggle{position:absolute;opacity:0;pointer-events:none}
.navbtn{display:none;cursor:pointer;font-weight:700;font-size:.9rem;text-transform:uppercase;letter-spacing:.08em;align-items:center;gap:8px;border:1.5px solid var(--ink);padding:8px 12px}
.burger,.burger:before,.burger:after{display:block;width:18px;height:2px;background:var(--ink);position:relative}
.burger:before,.burger:after{content:"";position:absolute}.burger:before{top:-6px}.burger:after{top:6px}
.menu{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:2px 4px;justify-content:flex-end}
.menu a,.menu .lbl{display:block;padding:8px 10px;text-decoration:none;font-weight:600;font-size:.92rem;border-bottom:3px solid transparent}
.menu a:hover,.menu a[aria-current],.menu .trail>a{border-bottom-color:var(--m)}
.menu .has-sub{position:relative}
.menu .sub{list-style:none;margin:0;padding:6px;display:none;position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--ink);min-width:220px}
.menu .has-sub:hover>.sub,.menu .has-sub:focus-within>.sub{display:block}
@media(max-width:960px){.navbtn{display:inline-flex}.menu{display:none;position:absolute;right:0;top:calc(100% + 14px);background:#fff;border:1px solid var(--ink);flex-direction:column;min-width:250px;padding:8px;box-shadow:6px 6px 0 var(--c)}.navtoggle:checked~.menu{display:flex}.menu .sub{position:static;display:block;border:0;padding-left:12px}}
.kicker{text-transform:uppercase;letter-spacing:.14em;font-size:.76rem;font-weight:700;margin:0 0 10px;display:flex;align-items:center;gap:10px}
.kicker:before{content:"";width:26px;height:3px;background:var(--m)}
h1,h2,h3,h4{font-family:var(--font);line-height:1.12;letter-spacing:-.025em;font-weight:800}
.hero{border-bottom:1px solid var(--rule);background:radial-gradient(circle at 1px 1px,#e7e3da 1px,transparent 1.5px) 0 0/16px 16px}
.hero-inner{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center;padding-top:56px;padding-bottom:56px}
.hero h1{font-size:clamp(2.2rem,5vw,3.9rem);margin:0 0 18px}
.lead{font-size:1.18rem;color:#33322f;max-width:62ch;margin:0 0 10px}
.btns{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.btn{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:700;padding:12px 20px;border:2px solid var(--ink);box-shadow:4px 4px 0 var(--m);transition:transform .15s,box-shadow .15s}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--c)}
.btn-ghost{background:transparent;color:var(--ink);box-shadow:4px 4px 0 var(--y)}
.hero-svg{width:100%;height:auto;display:block}
@media(max-width:820px){.hero-inner{grid-template-columns:1fr}.hero-art{max-width:420px}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px;margin-top:-30px;position:relative}
.tile{position:relative;display:flex;flex-direction:column;gap:6px;background:var(--sheet);border:1px solid var(--ink);padding:22px 22px 20px;text-decoration:none;min-height:170px;border-top:8px solid var(--k)}
.tile.ink-c{border-top-color:var(--c)}.tile.ink-m{border-top-color:var(--m)}.tile.ink-y{border-top-color:var(--y)}
.tile strong{font-size:1.2rem;letter-spacing:-.02em}
.tile-no{font-size:.75rem;font-weight:700;color:var(--muted);letter-spacing:.1em}
.tile-t{color:var(--muted);font-size:.95rem;flex:1}
.tile-go{font-weight:800;font-size:1.2rem;transition:transform .15s}
.tile:hover .tile-go{transform:translateX(6px)}
.tile:hover{box-shadow:6px 6px 0 var(--ink)}
.crop{position:absolute;inset:-10px;pointer-events:none;background:linear-gradient(var(--ink),var(--ink)) 0 10px/7px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 10px 0/1px 7px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% 10px/7px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) calc(100% - 10px) 0/1px 7px no-repeat,linear-gradient(var(--ink),var(--ink)) 0 calc(100% - 10px)/7px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) 10px 100%/1px 7px no-repeat,linear-gradient(var(--ink),var(--ink)) 100% calc(100% - 10px)/7px 1px no-repeat,linear-gradient(var(--ink),var(--ink)) calc(100% - 10px) 100%/1px 7px no-repeat}
.sheet{position:relative;background:var(--sheet);border:1px solid var(--rule);padding:clamp(22px,5vw,58px);margin:48px auto;max-width:860px;box-shadow:0 1px 0 var(--rule),0 18px 40px -28px rgba(0,0,0,.25)}
.home .sheet{margin-top:56px}
.prose h2{font-size:1.75rem;margin:2em 0 .5em;padding-top:.4em;border-top:1px solid var(--rule)}
.prose h2:first-child,.prose .crop+h2{margin-top:0;border-top:0;padding-top:0}
.prose h3{font-size:1.25rem;margin:1.6em 0 .4em}
.prose p,.prose ul,.prose ol{margin:0 0 1.05em}
.prose ul,.prose ol{padding-left:1.3em}
.prose li{margin:.3em 0}
.prose ul li::marker{color:var(--m)}
.prose ol li::marker{font-weight:700}
.prose a{text-decoration-color:var(--c);text-decoration-thickness:2px;text-underline-offset:3px}
.prose a:hover{background:#e6f6fc}
.prose strong{font-weight:700}
.prose blockquote{margin:1.5em 0;padding:14px 20px;border-left:6px solid var(--y);background:#fffbe0}
.prose table{width:100%;border-collapse:collapse;margin:1.4em 0;font-size:.95rem;display:block;overflow-x:auto}
.prose th,.prose td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--rule);vertical-align:top}
.prose th{border-bottom:2px solid var(--ink);font-weight:700;white-space:nowrap}
.prose code{font-size:.9em;background:#f1efe9;padding:1px 5px}
.prose hr{border:0;border-top:1px dashed var(--muted);margin:2em 0}
.pagehead{border-bottom:1px solid var(--ink);padding:52px 0 40px;background:linear-gradient(90deg,var(--c) 0 10px,transparent 10px) left/100% 100% no-repeat,var(--paper)}
.pagehead.ink-m{background:linear-gradient(90deg,var(--m) 0 10px,transparent 10px),var(--paper)}
.pagehead.ink-y{background:linear-gradient(90deg,var(--y) 0 10px,transparent 10px),var(--paper)}
.pagehead.ink-k{background:linear-gradient(90deg,var(--k) 0 10px,transparent 10px),var(--paper)}
.pagehead h1{font-size:clamp(2rem,4.5vw,3.2rem);margin:0 0 14px;max-width:24ch}
.crumbs{font-size:.88rem;margin:0 0 12px;color:var(--muted)}.crumbs a{color:var(--ink)}
.meta{font-size:.88rem;color:var(--muted);margin:16px 0 0}
.badge{display:inline-block;border:1px solid var(--ink);padding:1px 8px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.8rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:20px}
.chips a{border:1px solid var(--ink);padding:5px 12px;text-decoration:none;font-size:.88rem;font-weight:600;background:#fff}
.chips a:hover,.chips a[aria-current]{background:var(--ink);color:#fff}
.sec-h{font-size:1.5rem;margin:0 0 22px;display:flex;align-items:center;gap:14px}
.sec-h:after{content:"";flex:1;height:1px;background:var(--ink)}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:26px;margin:40px 0}
.latest .grid,.related .grid{margin-top:0}
.pcard{position:relative;display:flex;flex-direction:column;gap:8px;background:var(--sheet);border:1px solid var(--rule);padding:24px;text-decoration:none;transition:border-color .15s,box-shadow .15s}
.pcard .crop{opacity:0;transition:opacity .15s}
.pcard:hover{border-color:var(--ink);box-shadow:5px 5px 0 var(--c)}
.pcard:hover .crop{opacity:1}
.pcat{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;font-weight:700;color:var(--m)}
.ptitle{font-size:1.22rem;line-height:1.2;letter-spacing:-.02em}
.pex{color:var(--muted);font-size:.95rem;flex:1}
.pmeta{font-size:.8rem;color:var(--muted)}
.more{margin:0 0 60px}
.related{margin:0 0 60px}
.pager{display:flex;align-items:center;justify-content:center;gap:16px;margin:0 0 60px}
.tags{margin-top:2em;font-size:.9rem}.tags a{margin-right:8px}
.foot{background:var(--ink);color:#e9e6df;margin-top:40px;padding:50px 0 0}
.foot a{color:#fff}
.foot-inner{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
@media(max-width:760px){.foot-inner{grid-template-columns:1fr}}
.foot-brand .regmark{color:#fff}
.foot-brand .regmark path:last-child{stroke:var(--ink)}
.foot-h{font-size:.8rem;text-transform:uppercase;letter-spacing:.14em;margin:0 0 12px;color:#bdb9b0}
.footlinks{list-style:none;margin:0;padding:0;font-size:.95rem}.footlinks li{margin:5px 0}
.footlinks a{text-decoration:none}.footlinks a:hover{text-decoration:underline}
.slug-line{display:flex;align-items:center;gap:16px;border-top:1px solid #333;margin-top:40px;padding-top:18px;padding-bottom:26px;font-size:.84rem;color:#bdb9b0}
.slug-line p{margin:0}
.swatch{display:inline-flex}.swatch i{width:14px;height:14px;display:block}
.swatch i:nth-child(1){background:var(--c)}.swatch i:nth-child(2){background:var(--m)}.swatch i:nth-child(3){background:var(--y)}.swatch i:nth-child(4){background:#fff}
:focus-visible{outline:3px solid var(--c);outline-offset:2px}
@media print{.colorbar,.top,.foot,.related{display:none}.sheet{box-shadow:none;border:0}}