/* kp-orange-advocacy.v1.css: generated from Advocacy.dc.html by convert.py. Do not edit by hand; edit src/ and regenerate. */
body.ko-body-advocacy{margin:0;background:#0B0B0C;color:#17161A;font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html:has(> body.ko-body-advocacy){scroll-behavior:smooth}
.ko-advocacy a{color:#B83A0A;text-decoration:none}
.ko-advocacy a:hover{color:#8F2C06}
.ko-advocacy *{box-sizing:border-box}
.ko-advocacy ::selection{background:#FF5A1F;color:#0B0B0C}
.ko-advocacy .disp{font-family:"Big Shoulders Display","Oswald",Impact,sans-serif;text-transform:uppercase;letter-spacing:-0.01em}
.ko-advocacy .serif{font-family:"Instrument Serif",Georgia,serif}
.ko-advocacy .label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.ko-advocacy :focus-visible{outline:3px solid #FF5A1F;outline-offset:4px;border-radius:2px}
.ko-advocacy .navlink{color:#EFE9DF;font-size:14px;font-weight:500;padding:12px 4px;cursor:pointer}
.ko-advocacy .navlink:hover{color:#FF5A1F}
.ko-advocacy .btn{display:inline-flex;align-items:center;gap:12px;min-height:48px;padding:0 24px;border-radius:999px;background:#FF5A1F;color:#0B0B0C;font-weight:700;font-size:15px;cursor:pointer;transition:transform .3s cubic-bezier(.16,1,.3,1),background .2s}
.ko-advocacy .btn:hover{color:#0B0B0C;background:#FF7A45;transform:translateY(-2px)}
.ko-advocacy .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-advocacy .ghost:hover{color:#0B0B0C;background:#EFE9DF;border-color:#EFE9DF}
.ko-advocacy .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-advocacy .helppill:hover{background:#FF5A1F;color:#0B0B0C}
.ko-advocacy .prog{transform:scaleX(0);transform-origin:left}
.ko-advocacy .soc{color:#EFE9DF;font-size:15px;font-weight:500;display:inline-flex;align-items:center;gap:8px;min-height:44px;cursor:pointer}
.ko-advocacy .soc:hover{color:#FF5A1F}
.ko-advocacy .chap{position:relative;padding:120px 96px}
.ko-advocacy .light{background:#F6F2EA;color:#17161A}
.ko-advocacy .cream{background:#EFE9DF;color:#17161A}
.ko-advocacy .dark{background:#0B0B0C;color:#EFE9DF}
.ko-advocacy .ink2{background:#151517;color:#EFE9DF}
.ko-advocacy .orange{background:#FF5A1F;color:#0B0B0C}
.ko-advocacy .kick{color:#B83A0A;margin-bottom:12px}
.ko-advocacy .dark .kick,.ko-advocacy .ink2 .kick{color:#FF5A1F}
.ko-advocacy .orange .kick{color:#0B0B0C}
.ko-advocacy .cols{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:80px;align-items:start}
.ko-advocacy .solo{max-width:920px}
.ko-advocacy .body p{margin:0 0 26px;font-size:19px;line-height:1.68;color:#2A2824}
.ko-advocacy .dark .body p,.ko-advocacy .ink2 .body p{color:#D8D1C6}
.ko-advocacy .body p.lead::first-letter{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;float:left;font-size:96px;line-height:.78;margin:6px 14px 0 0;color:#B83A0A}
.ko-advocacy .dark .body p.lead::first-letter,.ko-advocacy .ink2 .body p.lead::first-letter{color:#FF5A1F}
.ko-advocacy .photo{margin:0}
.ko-advocacy .photo .frame{overflow:hidden;border-radius:6px}
.ko-advocacy .photo img{display:block;width:100%;height:100%;object-fit:cover}
.ko-advocacy .photo figcaption{margin-top:14px;font-size:14px;color:#6A635B}
.ko-advocacy .dark .photo figcaption,.ko-advocacy .ink2 .photo figcaption{color:#A09A92}
.ko-advocacy .sticky{position:sticky;top:130px}
.ko-advocacy .pq{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:38px;line-height:1.2;letter-spacing:-.01em}
.ko-advocacy .pq .mark{display:block;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:80px;line-height:.6;color:#FF5A1F;margin-bottom:6px}
.ko-advocacy .hl{background-image:linear-gradient(#FFB08F,#FFB08F);background-repeat:no-repeat;background-size:100% 100%;padding:0 .06em}
.ko-advocacy .dark .hl,.ko-advocacy .ink2 .hl{background-image:linear-gradient(#FF5A1F,#FF5A1F);color:#0B0B0C}
.ko-advocacy .rec{max-width:1040px}
.ko-advocacy .rec ul{list-style:none;margin:0;padding:0}
.ko-advocacy .rec li{display:grid;grid-template-columns:150px minmax(0,1fr);gap:28px;padding:24px 0;border-bottom:1px solid rgba(23,22,26,.16);font-size:17px;line-height:1.55}
.ko-advocacy .dark .rec li,.ko-advocacy .ink2 .rec li{border-bottom-color:rgba(239,233,223,.14)}
.ko-advocacy .rec .d{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:22px;line-height:1.15}
.ko-advocacy .rec q{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:21px;line-height:1.3;quotes:"\201C" "\201D"}
.ko-advocacy .rec .src{display:inline-block;margin-top:6px;font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#B83A0A;text-decoration:underline;text-underline-offset:3px}
.ko-advocacy .dark .rec .src,.ko-advocacy .ink2 .rec .src{color:#FF5A1F}
.ko-advocacy .care{border-top:1px solid rgba(23,22,26,.16)}
.ko-advocacy .dark .care,.ko-advocacy .ink2 .care{border-top-color:rgba(239,233,223,.14)}
.ko-advocacy .care>div{padding:36px 0;border-bottom:1px solid rgba(23,22,26,.16);display:grid;grid-template-columns:280px minmax(0,1fr);gap:48px}
.ko-advocacy .dark .care>div,.ko-advocacy .ink2 .care>div{border-bottom-color:rgba(239,233,223,.14)}
.ko-advocacy .care h3{margin:0;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:34px;text-transform:uppercase;line-height:1.05}
.ko-advocacy .care p{margin:0 0 14px;font-size:18px;line-height:1.6;color:#2A2824;max-width:640px}
.ko-advocacy .dark .care p,.ko-advocacy .ink2 .care p{color:#D8D1C6}
.ko-advocacy .care p:last-child{margin-bottom:0}
.ko-advocacy .stat-big{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:110px;line-height:.85;color:#FF5A1F}
.ko-advocacy .stat-k{margin-top:10px;font-size:14px;color:#A09A92}
.ko-advocacy .stat-src{margin-top:4px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#7E7870}
.ko-advocacy .barrow{display:grid;grid-template-columns:280px minmax(0,1fr);gap:32px;align-items:center;margin-bottom:26px}
.ko-advocacy .bar{height:44px;border-radius:3px}
@keyframes fadeUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ko-advocacy .fade{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both}
@supports (animation-timeline: view()){.ko-advocacy .prog{animation:grow linear both;animation-timeline:scroll(root)}
.ko-advocacy .upin{animation:upIn linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
.ko-advocacy .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
.ko-advocacy .bar{animation:barfill linear both;animation-timeline:view();animation-range:entry 10% cover 45%}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes upIn{from{transform:translateY(50px);opacity:0}}
@keyframes reveal{from{clip-path:inset(14% 14% 14% 14%)}}
@keyframes barfill{from{transform:scaleX(0)}}
@media (prefers-reduced-motion: reduce){.ko-advocacy *,.ko-advocacy *::before,.ko-advocacy *::after{animation:none!important;transition:none!important}
html:has(> body.ko-body-advocacy){scroll-behavior:auto}}
@media (min-width: 900px) and (max-width: 1279px){.ko-advocacy .ko-root{zoom:calc(100vw / 1280px)}}@supports not (zoom: calc(100vw / 1280px)){@media (min-width: 900px) and (max-width: 1279px){.ko-advocacy .ko-root{zoom:.85}}}
/* ---- stage 3 common: lessons from My Story and the homepage, applied up front ----
   convert.py replaces .ko-advocacy with the page scope (.ko-about, .ko-media, ...). */

/* 1. Photos show whole, never cropped (Khary 2026-09-23/24: faces were cut off). A photo keeps its own
      shape and its frame follows it; no fixed-height frames, no parallax zoom, no object-fit crop.
      Decorative images (alt="") are handled per page. */
html body .ko-advocacy .ko-root img:not([alt=""]){height:auto!important;max-height:none!important;aspect-ratio:auto!important;object-fit:contain!important;animation:none!important;transform:none!important;translate:none!important;scale:none!important}
html body .ko-advocacy .ko-root *:has(> img:not([alt=""])){height:auto!important;min-height:0!important;aspect-ratio:auto!important}

/* 2. Scroll reveals finish within 160 px of entering the screen (Khary 2026-09-24): nothing on screen
      may sit dim, half-drawn, clipped or on a wrong number. */
html body .ko-advocacy :is(.upin,.reveal,.bar,.draw){animation-range:entry 0% entry 160px!important}
/* overflow:hidden makes a box a scroll container, and a reveal inside it follows that box (which never
   scrolls) instead of the page, so it parks part-way forever (found on the Experience closer: 77.5%).
   overflow:clip clips the same way without becoming a scroll container. */
html body .ko-advocacy .ko-root:is([style*="overflow: hidden"], [style*="overflow:hidden"]), html body .ko-advocacy .ko-root :is([style*="overflow: hidden"], [style*="overflow:hidden"]){overflow:clip!important}

/* 4. Phones and small tablets (no phone artboards for these pages). The page's own help band and footer
      give way to the shell's phone help band and footer, as on Get help. */
@media (max-width: 899px){
  html body .ko-advocacy .ko-root{--ko-gut:max(20px, calc((100vw - 680px) / 2));overflow-x:clip}
  html body .ko-advocacy .ko-root :is(.helpband, footer){display:none!important}
  /* frame: one gutter (20 px at 390, wider on tablets so lines stay near 640 px), phone section rhythm */
  html body .ko-advocacy .ko-root section, html body .ko-advocacy .ko-root>[data-ko-sec]{padding:64px var(--ko-gut)!important;min-height:0!important;height:auto!important}
  html body .ko-advocacy .ko-root [data-ko-sec]:has(> section){padding:0!important}  /* wrappers around sections */
  html body .ko-advocacy .ko-root>:first-child{padding-top:116px!important}         /* clears the floating shell header */
  /* every drawn grid becomes one column; sticky columns scroll normally */
  html body .ko-advocacy .ko-root :is([style*="grid-template-columns"], .cols){grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
  html body .ko-advocacy .ko-root [style*="position: sticky"], html body .ko-advocacy .ko-root .sticky{position:static!important}
  html body .ko-advocacy .ko-root [style*="display: flex"]{flex-wrap:wrap}
  html body .ko-advocacy .ko-root [style*="width:"]:not(img):not(svg):not([aria-hidden="true"]){max-width:100%!important}
  /* photos: whole, full column width, no taller than a comfortable screen share */
  html body .ko-advocacy .ko-root img:not([alt=""]){width:100%!important;max-width:560px}
  html body .ko-advocacy .ko-root figure{margin-left:0!important;margin-right:0!important;rotate:0deg!important}
  /* type, from the phone artboards (Home, My Story, Get help) */
  html body .ko-advocacy .ko-root h1{font-size:clamp(52px, 17vw, 76px)!important;line-height:.86!important}
  html body .ko-advocacy .ko-root h2.disp, html body .ko-advocacy .ko-root .ttl{font-size:clamp(38px, 12vw, 56px)!important;line-height:.9!important;max-width:none!important}
  html body .ko-advocacy .ko-root .num{font-size:108px!important;-webkit-text-stroke-width:1.5px}
  html body .ko-advocacy .ko-root :is(p, li){max-width:none!important}
  html body .ko-advocacy .ko-root p.serif, html body .ko-advocacy .ko-root .serif[style*="font-size: 2"], html body .ko-advocacy .ko-root .serif[style*="font-size: 3"]{font-size:23px!important;line-height:1.2!important}
  html body .ko-advocacy .ko-root .body p{font-size:18px;line-height:1.65}
  html body .ko-advocacy .ko-root .head{flex-wrap:wrap;gap:12px 20px!important;margin-bottom:32px!important}
  html body .ko-advocacy .ko-root h2, html body .ko-advocacy .ko-root .ttl{overflow-wrap:anywhere;hyphens:manual}
  html body .ko-advocacy .ko-root .stat{flex:1 1 140px!important}
  html body .ko-advocacy .ko-root .know{columns:1!important}
  html body .ko-advocacy .ko-root .btn, html body .ko-advocacy .ko-root .ghost{min-height:48px}
  /* dated rows (timeline, "On the record", awards): the date sits above its text instead of a 150 px column */
  html body .ko-advocacy .ko-root :is(.tlrow, .rec li, .plain li){grid-template-columns:minmax(0,1fr)!important;gap:6px!important}
  /* the desktop help band's wrapper and the rule drawn above it go with it */
  html body .ko-advocacy .ko-root *:has(> .helpband):not(section){display:none!important}
  html body .ko-advocacy .ko-root .draw:has(+ * > .helpband){display:none!important}
}

/* Wide screens (lesson 3): past 1440 px every section keeps its 1440 px composition, centered.
   Generated by preview/wide_rules.py from the side padding each section has at 1440 px. */
@media (min-width: 1441px){
html body .ko-advocacy [data-ko-sec="content-note"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="hero"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="by-the-numbers"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="what-i-believe"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="what-i-care-about"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="on-the-record"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="secure-storage"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
html body .ko-advocacy [data-ko-sec="closer"]{padding-left:calc((100vw - 1440px) / 2 + 96px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
}

/* phone layout, hand-written from the phone artboards (G1, G2, G4) */
/* Advocacy on phones and small tablets (no phone artboard; phone patterns from Home and My Story). */
@media (max-width: 899px){
  /* causes and wait-time rows: label above its content instead of a 280 px column */
  html body .ko-advocacy :is(.care>div, .barrow){grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  html body .ko-advocacy .care h3{font-size:28px}
  /* wait-time chart: bar and its value stay on one line, as the My Story phone chart does */
  html body .ko-advocacy .barrow>div[style*="display: flex"]{flex-wrap:nowrap}
  html body .ko-advocacy .barrow .disp{font-size:26px!important}
  html body .ko-advocacy .barrow .bar{height:32px}
  html body .ko-advocacy .barrow span.disp{font-size:28px!important;white-space:nowrap}
}

/* Four sections were drawn with no padding at all (What I believe, The causes, On the record, Secure storage),
   so their text touched the screen edge and the page scrolled sideways at 1024 and 1280 px. They take the
   96 px padding their neighbours on this page use. */
html body .ko-advocacy :is([data-ko-sec="what-i-believe"],[data-ko-sec="what-i-care-about"],[data-ko-sec="on-the-record"],[data-ko-sec="secure-storage"]){padding:96px}
@media (min-width: 900px){
  /* The testifying photo is a tall portrait; shown whole at full column width it ran taller than a screen. */
  html body .ko-advocacy [data-ko-sec="what-i-believe"] figure{max-width:520px;margin-left:auto}
}
@media (min-width: 1280px){
  /* "On the record" is one reading column; it centers instead of hugging the left edge (lesson 3). */
  html body .ko-advocacy [data-ko-sec="on-the-record"]>*{max-width:1040px;margin-inline:auto}
}
@media (min-width: 900px){
  /* Democracy row: 280 + 680 px of fixed columns left 32 px for a 260 px photo below 1440 px, so it hung off
     the page. The text column flexes; the photo keeps a 260 px track. */
  html body .ko-advocacy .care>div[style*="minmax(0,680px)"]{grid-template-columns:280px minmax(0,1fr) 260px!important}
  html body .ko-advocacy .care .photo .frame{width:auto!important}
}

/* Contrast (axe 2026-09-25): statistic source lines were #7E7870 on #151517 (4.17:1). */
html body .ko-advocacy .stat-src{color:#A09A92!important}