@font-face{font-family:"Libre Franklin";src:url(/fonts/pd-libre-franklin-var.woff2) format("woff2");font-weight:400 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/pd-source-serif-4-var.woff2) format("woff2");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url(/fonts/pd-source-serif-4-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}

:root{--ink:#4d1015;--cover:#6b1a20;--paper:#fffdf9;--soft:#633d42;--rule:#e6cfd3;--err:#b0105f;--cover-text:#f3d5da;
--sans:"Libre Franklin","Franklin Gothic Medium","Arial Narrow",sans-serif;--serif:"Source Serif 4",Georgia,serif;--gut:clamp(20px,5vw,80px);--ease:cubic-bezier(.16,1,.3,1);
color-scheme:light;scrollbar-color:#c98f99 var(--cover)}
[data-band="contents"],.sw-contents{--fill:#fffdf9;--on:#4d1015;--line:#4d1015}
[data-band="education"],.sw-education{--fill:#f6cf1d;--on:#1a1315;--line:#b89400}
[data-band="training"],.sw-training{--fill:#c8146e;--on:#ffffff;--line:#c8146e}
[data-band="implementation"],.sw-implementation{--fill:#12b3b0;--on:#1a1315;--line:#0b8a88}
[data-band="industries"],.sw-industries{--fill:#1f6e3d;--on:#ffffff;--line:#1f6e3d}
[data-band="articles"],.sw-articles{--fill:#b8a4f0;--on:#1a1315;--line:#7a5fd6}
[data-band="frontdesk"],.sw-frontdesk{--fill:#ff7d5c;--on:#1a1315;--line:#e0502c}
[data-band="paper"],.sw-paper{--fill:#fffdf9;--on:#4d1015;--line:#4d1015}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:24px}
body{margin:0;background:var(--cover);color:var(--ink);font:400 1.1875rem/1.6 var(--sans);font-variant-numeric:lining-nums;caret-color:var(--cover);text-rendering:optimizeLegibility}
::selection{background:#f6df7c;color:#1a1315}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:3px}
.band :focus-visible{outline-color:var(--on)}
.colophon :focus-visible,.cookiebar :focus-visible,.skip-link:focus-visible{outline-color:#fff}
a{color:inherit;text-decoration-line:underline;text-decoration-thickness:2px;text-underline-offset:.2em;text-decoration-color:var(--line,var(--ink));transition:text-decoration-thickness .2s var(--ease)}
a:hover{text-decoration-thickness:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip-link{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;background:var(--ink);color:#fff;padding:12px 16px;border-radius:8px;font-weight:700}
.skip-link:focus,.skip-link:focus-visible{position:fixed;left:16px;top:16px;width:auto;height:auto;min-height:44px;padding:12px 16px;z-index:100;overflow:visible;display:inline-flex;align-items:center}
main:focus,[id]{scroll-margin-top:80px}

/* binder */
.binder{max-width:1224px;margin:0 auto;padding:28px 28px 0}
.page{position:relative;z-index:2;background:var(--paper);border-radius:4px;box-shadow:0 2px 3px rgba(30,6,8,.3),0 26px 50px -24px rgba(30,6,8,.7);min-height:calc(100vh - 28px);display:flex;flex-direction:column}

/* masthead band */
.band{background:var(--fill);color:var(--on);border-radius:4px 4px 0 0}
.mast{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:6px 24px;padding:20px var(--gut) 0}
.word{font-weight:800;font-size:1.3rem;line-height:1.3;letter-spacing:-.01em;text-decoration:none;min-height:44px;display:inline-flex;align-items:center}
.rh{font-weight:700;font-size:.78rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;display:flex;flex-wrap:wrap;gap:0 .6em;align-items:center}
.rh a{min-height:44px;display:inline-flex;align-items:center;text-decoration-color:currentColor}
.title{padding:clamp(40px,6vw,96px) var(--gut) clamp(36px,4.5vw,64px)}
h1{margin:0;font-weight:800;font-size:clamp(2.4rem,1.4rem + 3.4vw,4.5rem);line-height:1.02;letter-spacing:-.03em;text-wrap:balance;max-width:18ch}
[data-band="contents"] h1,[data-band="paper"] h1{border-bottom:3px solid var(--ink);padding-bottom:20px}
[data-band="contents"] h1{max-width:24ch}

/* sheet */
.sheet{flex:1;padding:clamp(36px,5vw,72px) var(--gut) clamp(64px,8vw,120px)}
.lede{font-family:var(--serif);font-size:clamp(1.25rem,1.02rem + .7vw,1.58rem);line-height:1.55;max-width:40ch}
.lede p{margin:0 0 .8em}
.prose{font-family:var(--serif);max-width:54ch}
.prose p,.prose ul,.prose ol{margin:0 0 1.05em}
.prose p,.lede p{text-wrap:pretty}
.prose li{margin:0 0 .4em;overflow-wrap:anywhere}
.prose ul,.prose ol{padding-left:1.2em}
.prose li::marker{color:var(--soft)}
.prose strong{font-weight:700}
.entry{margin-top:clamp(56px,6vw,88px)}
.sheet>.entry:first-child,.read>.entry:first-child{margin-top:0}
.entry h2{margin:0 0 .45em;font-weight:800;font-size:clamp(1.85rem,1.3rem + 1.6vw,2.75rem);line-height:1.15;letter-spacing:-.025em;text-wrap:balance;max-width:24ch}
.filed{padding-top:22px;position:relative}
.filed::before{content:"";position:absolute;top:0;left:0;width:56px;height:8px;border-radius:0 0 4px 4px;background:var(--fill);box-shadow:inset 0 0 0 1.5px rgba(77,16,21,.22)}

/* dot-leader listings */
.lbl{margin:0 0 10px;font-weight:700;font-size:.8rem;line-height:1.4;letter-spacing:.12em;text-transform:uppercase;color:var(--soft)}
.leaders,.prose .leaders{list-style:none;margin:0;padding:0}
.row{display:flex;align-items:last baseline;gap:.55rem;min-height:48px;padding:.5rem 0;color:var(--ink);text-decoration:none;font-weight:700;font-size:1.28rem;line-height:1.3}
.rl{flex:0 1 auto;text-wrap:pretty}
.rd{flex:1 1 1.5rem;min-width:1.5rem;border-bottom:3px dotted #c29aa0;transform:translateY(-.22em);transition:border-color .2s var(--ease)}
.rr{flex:none;display:inline-flex;align-items:center;gap:.45rem;font-size:.8rem;line-height:1.4;letter-spacing:.1em;text-transform:uppercase;align-self:center}
.row:hover .rl{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.2em}
.row:hover .rd{border-bottom-color:var(--ink)}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px;background:var(--fill);box-shadow:inset 0 0 0 1.5px rgba(77,16,21,.3)}
.toc{margin:clamp(32px,4vw,48px) 0 0;max-width:70ch}

/* home: the open directory page */
.open{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(32px,5vw,80px);align-items:start}
.open .lede{max-width:34ch}
.home-toc{margin:0}
.home-toc .row{font-size:clamp(1.25rem,1.05rem + .55vw,1.55rem);min-height:56px}
.k-home .entry .prose{font-size:1.1875rem;line-height:1.6}

/* legal / reading */
.read{max-width:56ch}
.read.prose{max-width:54ch}
.read .lede{max-width:none}
.inq-submit{display:inline-flex;align-items:center;justify-content:center;font-family:var(--sans);font-weight:700;font-size:1.05rem;min-height:52px;padding:0 24px;background:var(--fill);color:var(--on);border:2px solid var(--ink);border-radius:10px;cursor:pointer;text-decoration:none;box-shadow:0 2px 0 var(--ink),0 10px 18px -12px rgba(77,16,21,.55);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.inq-submit:hover{transform:translateY(-2px);box-shadow:0 4px 0 var(--ink),0 14px 22px -12px rgba(77,16,21,.55)}
.inq-submit:active{transform:translateY(1px);box-shadow:0 1px 0 var(--ink)}

/* binder back: colophon */
.colophon{max-width:1224px;margin:0 auto;background:var(--cover);padding:28px calc(28px + var(--gut)) 40px;color:var(--cover-text);font-size:.98rem;line-height:1.5}
.colophon ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 26px}
.colophon li{display:flex;align-items:center;min-height:44px}
.colophon a{color:#fff;text-decoration-color:#d9a9b1}
.colophon .cname{color:#fff;font-weight:700}
a[href*="dirtroad.dev"],a[href*="dirtroad.dev"]:hover{text-decoration:none;color:#e6b8c0}

/* cookie slip */
.cookiebar{position:fixed;left:20px;bottom:20px;z-index:20;max-width:440px;background:var(--ink);color:#fff;border-radius:12px;padding:16px 18px;box-shadow:0 2px 4px rgba(0,0,0,.3),0 18px 40px -16px rgba(0,0,0,.7);display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px}
.cookiebar[hidden]{display:none}
.cookiebar p{margin:0;flex:1 1 220px;font-size:1rem;line-height:1.4}
.cookiebar-actions{display:flex;gap:10px}
.cookiebar button{font:inherit;font-weight:700;font-size:.98rem;min-height:44px;padding:0 16px;border-radius:8px;cursor:pointer;border:2px solid #fff}
.cookiebar [data-consent="denied"]{background:transparent;color:#fff}
.cookiebar [data-consent="granted"]{background:#fff;color:var(--ink)}
.cookiebar button:hover{background:#f6df7c;border-color:#f6df7c;color:#1a1315}
body:has(.cookiebar:not([hidden])) .colophon{padding-bottom:140px}

@media (max-width:1100px){
.open{grid-template-columns:1fr}
.open .lede{max-width:44ch}
}
@media (max-width:900px){
body{font-size:1.125rem}
.binder{display:block;padding:10px 0 0}
.page{margin:0 8px;min-height:0;border-radius:4px}
.band{border-radius:4px 4px 0 0}
.mast{flex-direction:column;align-items:flex-start;gap:0;padding-top:12px}
.rh{font-size:.72rem}
.colophon{padding:24px 24px 32px}
body:has(.cookiebar:not([hidden])) .colophon{padding-bottom:200px}
.cookiebar{left:8px;right:8px;bottom:8px;max-width:none;padding:12px 14px}
.cookiebar-actions{flex:1 1 100%}
.cookiebar button{flex:1;min-height:44px;font-size:.92rem}
.row{font-size:1.15rem;gap:.4rem}
.rr{font-size:.72rem;letter-spacing:.05em;gap:.35rem}
.rd{min-width:.8rem}
.cookiebar p{font-size:.92rem}
}
@media (prefers-reduced-motion:reduce){
*,*::before,*::after{transition:none!important;animation:none!important;scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
@media print{
body{background:#fff}.cookiebar,.colophon{display:none}.page{box-shadow:none}
}