/* kp-orange-home.v1.css: generated from Main.dc.html by convert.py. Do not edit by hand; edit src/ and regenerate. */
body.ko-body-home{margin:0;background:#0B0B0C;color:#EFE9DF;font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ko-home .ko-d a{color:#FF5A1F;text-decoration:none}
.ko-home .ko-d a:hover{color:#FF8A5C}
.ko-home .ko-d *{box-sizing:border-box}
.ko-home .ko-d ::selection{background:#FF5A1F;color:#0B0B0C}
.ko-home .ko-d .disp{font-family:"Big Shoulders Display","Oswald",Impact,sans-serif;text-transform:uppercase;letter-spacing:-0.01em}
.ko-home .ko-d .serif{font-family:"Instrument Serif",Georgia,serif}
.ko-home .ko-d .label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.ko-home .ko-d :focus-visible{outline:3px solid var(--signal);outline-offset:4px;border-radius:2px}
.ko-home .ko-d .navlink{color:#EFE9DF;font-size:14px;font-weight:500;padding:12px 4px;position:relative;cursor:pointer}
.ko-home .ko-d .navlink::after{content:"";position:absolute;left:4px;right:4px;bottom:6px;height:2px;background:var(--signal);transform:scaleX(0);transform-origin:right;transition:transform .35s cubic-bezier(.16,1,.3,1)}
.ko-home .ko-d .navlink:hover{color:#EFE9DF}
.ko-home .ko-d .navlink:hover::after{transform:scaleX(1);transform-origin:left}
.ko-home .ko-d .btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 24px;border-radius:999px;background:var(--signal);color:#0B0B0C;font-weight:700;font-size:15px;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s}
.ko-home .ko-d .btn:hover{color:#0B0B0C;background:#FF7A45;transform:translateY(-2px)}
.ko-home .ko-d .btn svg{transition:transform .3s cubic-bezier(.16,1,.3,1)}
.ko-home .ko-d .btn:hover svg{transform:translateX(4px) rotate(-45deg)}
.ko-home .ko-d .ghost{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(239,233,223,.35);color:#EFE9DF;font-weight:600;font-size:15px;cursor:pointer;transition:border-color .2s,background .2s}
.ko-home .ko-d .ghost:hover{color:#0B0B0C;background:#EFE9DF;border-color:#EFE9DF}
.ko-home .ko-d .prog{transform:scaleX(0);transform-origin:left}
@keyframes rise{from{transform:translateY(105%) rotate(6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes slowzoom{from{transform:scale(1.12)}to{transform:scale(1)}}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.25}}
@keyframes cue{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}
.ko-home .ko-d .mask{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.04em}
.ko-home .ko-d .ltr{display:inline-block;animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
.ko-home .ko-d .fade{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both}
.ko-home .ko-d .herovid{animation:slowzoom 9s cubic-bezier(.16,1,.3,1) both}
.ko-home .ko-d .dot{animation:blink 1.6s ease-in-out infinite}
.ko-home .ko-d .cueline{animation:cue 1.8s cubic-bezier(.65,0,.35,1) infinite}
.ko-home .ko-d .spot{transition:left .5s cubic-bezier(.16,1,.3,1),top .5s cubic-bezier(.16,1,.3,1)}
.ko-home .ko-d .role{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s}
.ko-home .ko-d .role[data-on="true"]{transform:none;opacity:1}
.ko-home .ko-d .role[data-was="true"]{transform:translateY(-110%);opacity:0}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}100%{transform:translate(0,0)}}
.ko-home .ko-d .grain{animation:grain .9s steps(4) infinite}
.ko-home .ko-d .chip{position:absolute;padding:14px 18px 16px;background:#FFFDF8;color:#17161A;border-radius:4px;box-shadow:0 1px 0 rgba(0,0,0,.06),0 18px 40px -18px rgba(23,22,26,.35);max-width:300px;transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s}
.ko-home .ko-d .chip:hover{transform:translateY(-6px) scale(1.03);box-shadow:0 1px 0 rgba(0,0,0,.06),0 28px 50px -18px rgba(23,22,26,.45);z-index:3}
.ko-home .ko-d .chip .src{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#6A635B;font-weight:600;margin-bottom:6px}
.ko-home .ko-d .chip .t{font-size:17px;line-height:1.3;font-weight:600}
.ko-home .ko-d .chip.o{background:#FF5A1F;color:#0B0B0C}
.ko-home .ko-d .chip.o .src{color:#3A1A0C}
.ko-home .ko-d .chip.k{background:#17161A;color:#EFE9DF}
.ko-home .ko-d .chip.k .src{color:#A09A92}
.ko-home .ko-d .strip{scrollbar-width:none;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.ko-home .ko-d .strip::-webkit-scrollbar{display:none}
.ko-home .ko-d .card{scroll-snap-align:start;flex:0 0 360px;height:540px;position:relative;border-radius:6px;overflow:hidden;background:#151517;color:#EFE9DF;cursor:pointer;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.ko-home .ko-d .card:hover{transform:translateY(-10px);color:#EFE9DF}
.ko-home .ko-d .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.7);transform:scale(1.06);transition:filter .6s,transform .9s cubic-bezier(.16,1,.3,1)}
.ko-home .ko-d .card:hover img{filter:grayscale(0) contrast(1.05) brightness(.8);transform:scale(1)}
.ko-home .ko-d .card .num{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:140px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(239,233,223,.8);transition:color .4s,-webkit-text-stroke-color .4s}
.ko-home .ko-d .card:hover .num{color:var(--signal);-webkit-text-stroke-color:var(--signal)}
.ko-home .ko-d .card .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,11,12,.15) 0%,rgba(11,11,12,.1) 40%,rgba(11,11,12,.92) 100%)}
.ko-home .ko-d .arrowbtn{width:56px;height:56px;border-radius:50%;border:1.5px solid rgba(239,233,223,.35);background:transparent;color:#EFE9DF;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background .2s,color .2s,border-color .2s}
.ko-home .ko-d .arrowbtn:hover{background:var(--signal);border-color:var(--signal);color:#0B0B0C}
.ko-home .ko-d .yr{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:64px;line-height:1;color:transparent;-webkit-text-stroke:1.5px #EFE9DF;transition:color .3s,-webkit-text-stroke-color .3s}
.ko-home .ko-d .stop{cursor:default}
.ko-home .ko-d .stop:hover .yr{color:var(--signal);-webkit-text-stroke-color:var(--signal)}
.ko-home .ko-d .stop .pin{transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s}
.ko-home .ko-d .stop:hover .pin{transform:scale(1.6);background:var(--signal)}
@property --n{}
.ko-home .ko-d .count{counter-reset:n var(--n)}
.ko-home .ko-d .count::after{content:counter(n)}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ko-home .ko-d .mq{animation:mq 38s linear infinite}
.ko-home .ko-d .mq.slow{animation-duration:60s}
.ko-home .ko-d .mq.rev{animation-direction:reverse}
.ko-home .ko-d .mqwrap:hover .mq{animation-play-state:paused}
.ko-home .ko-d .outline{color:transparent;-webkit-text-stroke:1.5px #EFE9DF}
.ko-home .ko-d .row{display:grid;grid-template-columns:120px minmax(0,1fr) 64px;align-items:center;gap:32px;padding:34px 0;border-top:1px solid rgba(23,22,26,.18);color:#17161A;cursor:pointer;transition:padding .4s cubic-bezier(.16,1,.3,1),color .2s}
.ko-home .ko-d .row:hover{color:#17161A;padding-left:18px}
.ko-home .ko-d .row .rt{transition:color .2s}
.ko-home .ko-d .row:hover .rt{color:#B83A0A}
.ko-home .ko-d .row .ra{width:56px;height:56px;border-radius:50%;background:#17161A;color:#F6F2EA;display:flex;align-items:center;justify-content:center;transition:transform .4s cubic-bezier(.16,1,.3,1),background .2s}
.ko-home .ko-d .row:hover .ra{background:#B83A0A;transform:rotate(-45deg)}
.ko-home .ko-d .helppill{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 18px;border-radius:999px;border:1.5px solid #FF5A1F;color:#EFE9DF;font-weight:700;font-size:14px;cursor:pointer;transition:background .2s,color .2s}
.ko-home .ko-d .helppill:hover{background:#FF5A1F;color:#0B0B0C}
.ko-home .ko-d .soc{color:#EFE9DF;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.ko-home .ko-d .soc:hover{color:var(--signal)}
@supports (animation-timeline: view()){.ko-home .ko-d .prog{animation:grow linear both;animation-timeline:scroll(root)}
.ko-home .ko-d .chip{animation:chipIn linear both;animation-timeline:view();animation-range:entry 0% cover 42%}
.ko-home .ko-d .w{animation:wordOn linear both;animation-timeline:view()}
.ko-home .ko-d .slidein{animation:slideIn linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.ko-home .ko-d .upin{animation:upIn linear both;animation-timeline:view();animation-range:entry 0% cover 30%}
.ko-home .ko-d .wipe{animation:wipe linear both;animation-timeline:view();animation-range:entry 10% cover 45%}
.ko-home .ko-d .draw{animation:draw linear both;animation-timeline:view();animation-range:entry 20% cover 55%}
.ko-home .ko-d .count{animation:countUp linear both;animation-timeline:view();animation-range:entry 0% cover 40%}
.ko-home .ko-d .parallax{animation:par linear both;animation-timeline:view()}
.ko-home .ko-d .bigword{animation:bigword linear both;animation-timeline:view();animation-range:entry 0% exit 100%}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes chipIn{from{translate:var(--fx) var(--fy);rotate:var(--fr);opacity:0;filter:blur(8px)}}
@keyframes wordOn{from{color:#3A3733}}
@keyframes slideIn{from{transform:translateX(18%);opacity:0}}
@keyframes upIn{from{transform:translateY(80px);opacity:0}}
@keyframes wipe{from{clip-path:inset(0 100% 0 0)}}
@keyframes draw{from{transform:scaleX(0)}}
@keyframes countUp{from{--n:0}}
@keyframes par{from{transform:translateY(-60px)}to{transform:translateY(60px)}}
@keyframes bigword{from{transform:translateX(12%)}to{transform:translateX(-22%)}}
@media (prefers-reduced-motion: reduce){.ko-home .ko-d *,.ko-home .ko-d *::before,.ko-home .ko-d *::after{animation:none!important;transition:none!important}
.ko-home .ko-d .role{display:none}
.ko-home .ko-d .role[data-first="true"]{display:inline;position:static;transform:none;opacity:1}
.ko-home .ko-d .herovid{display:none}
.ko-home .ko-d .herostill{display:block!important}
.ko-home .ko-d .strip{scroll-behavior:auto}}
@media (max-width: 899px){body.ko-body-home{margin:0;background:#0B0B0C;color:#EFE9DF;font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.ko-home .ko-m a{color:#FF5A1F;text-decoration:none}
.ko-home .ko-m a:hover{color:#FF8A5C}
.ko-home .ko-m *{box-sizing:border-box}
.ko-home .ko-m .disp{font-family:"Big Shoulders Display","Oswald",Impact,sans-serif;text-transform:uppercase;letter-spacing:-0.01em}
.ko-home .ko-m .serif{font-family:"Instrument Serif",Georgia,serif}
.ko-home .ko-m .label{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase}
.ko-home .ko-m :focus-visible{outline:3px solid #FF5A1F;outline-offset:3px}
.ko-home .ko-m .btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 22px;border-radius:999px;background:#FF5A1F;color:#0B0B0C;font-weight:700;font-size:16px;cursor:pointer}
.ko-home .ko-m .btn:hover{color:#0B0B0C;background:#FF7A45}
.ko-home .ko-m .ghost{display:flex;align-items:center;justify-content:center;min-height:52px;padding:0 22px;border-radius:999px;border:1.5px solid rgba(239,233,223,.35);color:#EFE9DF;font-weight:600;font-size:16px;cursor:pointer}
.ko-home .ko-m .ghost:hover{color:#0B0B0C;background:#EFE9DF}
.ko-home .ko-m .iconbtn{width:48px;height:48px;border-radius:50%;border:0;background:#EFE9DF;color:#0B0B0C;display:flex;align-items:center;justify-content:center;cursor:pointer}
@keyframes rise{from{transform:translateY(105%) rotate(6deg);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes slowzoom{from{transform:scale(1.15)}to{transform:scale(1)}}
.ko-home .ko-m .mask{display:inline-block;overflow:hidden;vertical-align:top}
.ko-home .ko-m .ltr{display:inline-block;animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
.ko-home .ko-m .fade{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both}
.ko-home .ko-m .mq{animation:mq 26s linear infinite}
.ko-home .ko-m .herovid{animation:slowzoom 9s cubic-bezier(.16,1,.3,1) both}
.ko-home .ko-m .role{position:absolute;left:0;top:0;white-space:nowrap;transform:translateY(110%);opacity:0;transition:transform .7s cubic-bezier(.16,1,.3,1),opacity .5s}
.ko-home .ko-m .role[data-on="true"]{transform:none;opacity:1}
.ko-home .ko-m .role[data-was="true"]{transform:translateY(-110%);opacity:0}
.ko-home .ko-m .chip{position:absolute;padding:10px 13px 12px;background:#FFFDF8;color:#17161A;border-radius:4px;box-shadow:0 14px 30px -14px rgba(23,22,26,.4);max-width:190px}
.ko-home .ko-m .chip .src{font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#6A635B;font-weight:600;margin-bottom:4px}
.ko-home .ko-m .chip .t{font-size:13px;line-height:1.3;font-weight:600}
.ko-home .ko-m .chip.o{background:#FF5A1F;color:#0B0B0C}
.ko-home .ko-m .chip.o .src{color:#3A1A0C}
.ko-home .ko-m .chip.k{background:#17161A;color:#EFE9DF}
.ko-home .ko-m .chip.k .src{color:#A09A92}
.ko-home .ko-m .strip{scrollbar-width:none;scroll-snap-type:x mandatory}
.ko-home .ko-m .strip::-webkit-scrollbar{display:none}
.ko-home .ko-m .card{scroll-snap-align:start;flex:0 0 280px;height:400px;position:relative;border-radius:6px;overflow:hidden;background:#151517;color:#EFE9DF}
.ko-home .ko-m .card:hover{color:#EFE9DF}
.ko-home .ko-m .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.7)}
.ko-home .ko-m .num{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:96px;line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(239,233,223,.85)}
@media (prefers-reduced-motion: reduce){.ko-home .ko-m *,.ko-home .ko-m *::before,.ko-home .ko-m *::after{animation:none!important;transition:none!important}
.ko-home .ko-m .role{display:none}
.ko-home .ko-m .role[data-first="true"]{display:inline;position:static;transform:none;opacity:1}}}
.ko-home .ko-m{display:none}@media (max-width: 899px){.ko-home .ko-d{display:none}.ko-home .ko-m{display:block}}
.ko-home .ko-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
@media (min-width: 900px) and (max-width: 1279px){.ko-home .ko-root{zoom:calc(100vw / 1280px)}}@supports not (zoom: calc(100vw / 1280px)){@media (min-width: 900px) and (max-width: 1279px){.ko-home .ko-root{zoom:.85}}}
/* Scroll reveals finish within 160 px of entering the screen (Khary 2026-09-24, same fix as My Story):
   a reveal parked half-done left text dim, highlights unpainted, and count-ups on wrong numbers. */
html body .ko-home :is(.upin,.chip,.count,.draw,.slidein,.wipe,.w){animation-range:entry 0% entry 160px!important}
/* Hero video anchors to the top (Khary 2026-09-24: "cutting part of my head off in some scenes").
   On wide screens the hero is wider than the video, so it crops top and bottom; centered cropping
   cut his head in the 8-12 s scenes. Top-anchored cropping keeps his head in every scene. */
html body .ko-home .herovid{object-position:50% 0%!important;transform-origin:50% 0%}
/* "The short version" centers on wide screens (Khary 2026-09-24: "a lot of wasted space"). Its columns
   are fixed (440 px photo, 700 px text), so past 1440 px all the extra width piled up on the right. */
html body .ko-home [data-ko-sec="04-the-short-version"]>div{max-width:1236px;margin-inline:auto}
/* Photos show whole (Khary 2026-09-24, the stage 3 rule applied to the homepage): the short-version headshot,
   the two tilted polaroids, the "why I tell it" portrait and the kids photo were cut to fixed frames. */
html body .ko-home .ko-d img:is([src*="kp-headshot-hero"],[src*="RRA_team_4k"],[src*="Khary_Congress_Banner"],[src*="kp-ms-mental-health"],[src*="kp-kids"]):not([alt=""]){height:auto!important;object-fit:contain!important;animation:none!important;transform:none!important;translate:none!important}
html body .ko-home .ko-d div:has(> img:is([src*="kp-headshot-hero"],[src*="kp-ms-mental-health"]):not([alt=""])){height:auto!important}