/* kp-orange-story.v1.css: generated from Story.dc.html by convert.py. Do not edit by hand; edit src/ and regenerate. */
body.ko-body-story{margin:0;background:#0B0B0C;color:#17161A;font-family:"Hanken Grotesk",system-ui,sans-serif;-webkit-font-smoothing:antialiased}
html:has(> body.ko-body-story){scroll-behavior:smooth}
.ko-story a{color:#B83A0A;text-decoration:none}
.ko-story a:hover{color:#8F2C06}
.ko-story *{box-sizing:border-box}
.ko-story ::selection{background:#FF5A1F;color:#0B0B0C}
.ko-story .disp{font-family:"Big Shoulders Display","Oswald",Impact,sans-serif;text-transform:uppercase;letter-spacing:-0.01em}
.ko-story .serif{font-family:"Instrument Serif",Georgia,serif}
.ko-story .label{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
.ko-story :focus-visible{outline:3px solid #FF5A1F;outline-offset:4px;border-radius:2px}
.ko-story .navlink{color:#EFE9DF;font-size:14px;font-weight:500;padding:12px 4px;cursor:pointer}
.ko-story .navlink:hover{color:#FF5A1F}
.ko-story .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-story .btn:hover{color:#0B0B0C;background:#FF7A45;transform:translateY(-2px)}
.ko-story .prog{transform:scaleX(0);transform-origin:left}
.ko-story .chap{position:relative;padding:160px 96px 160px 200px;overflow:hidden}
.ko-story .light{background:#F6F2EA;color:#17161A}
.ko-story .cream{background:#EFE9DF;color:#17161A}
.ko-story .dark{background:#0B0B0C;color:#EFE9DF}
.ko-story .ink2{background:#151517;color:#EFE9DF}
.ko-story .orange{background:#FF5A1F;color:#0B0B0C}
.ko-story .head{display:flex;align-items:flex-end;gap:32px;margin-bottom:64px}
.ko-story .num{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:240px;line-height:.74;color:transparent;-webkit-text-stroke:2px #B83A0A}
.ko-story .dark .num,.ko-story .ink2 .num{-webkit-text-stroke-color:#FF5A1F}
.ko-story .orange .num{-webkit-text-stroke-color:#0B0B0C}
.ko-story .kick{color:#B83A0A;margin-bottom:12px}
.ko-story .dark .kick,.ko-story .ink2 .kick{color:#FF5A1F}
.ko-story .orange .kick{color:#0B0B0C}
.ko-story .ttl{margin:0;font-weight:900;font-size:96px;line-height:.86;max-width:760px}
.ko-story .sub{margin:18px 0 0;font-size:34px;line-height:1.15;max-width:760px}
.ko-story .cols{display:grid;grid-template-columns:minmax(0,680px) minmax(0,1fr);gap:88px;align-items:start}
.ko-story .body p{margin:0 0 28px;font-size:20px;line-height:1.68;color:#2A2824}
.ko-story .dark .body p,.ko-story .ink2 .body p{color:#D8D1C6}
.ko-story .orange .body p{color:#1A0E08}
.ko-story .body p.lead::first-letter{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;float:left;font-size:118px;line-height:.78;margin:8px 16px 0 0;color:#B83A0A}
.ko-story .dark .body p.lead::first-letter,.ko-story .ink2 .body p.lead::first-letter{color:#FF5A1F}
.ko-story .pq{margin:0;font-family:"Instrument Serif",Georgia,serif;font-size:52px;line-height:1.08;letter-spacing:-.01em}
.ko-story .pq .mark{display:block;font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:900;font-size:120px;line-height:.6;color:#FF5A1F;margin-bottom:8px}
.ko-story .photo{margin:0}
.ko-story .photo .frame{overflow:hidden;border-radius:6px}
.ko-story .photo img{display:block;width:100%;height:100%;object-fit:cover}
.ko-story .photo figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:14px}
.ko-story .sticky{position:sticky;top:130px}
.ko-story .stamp{display:grid;grid-template-columns:150px minmax(0,1fr);gap:20px;padding:20px 0;border-top:1px solid rgba(23,22,26,.16)}
.ko-story .dark .stamp,.ko-story .ink2 .stamp{border-top-color:rgba(239,233,223,.14)}
.ko-story .rec{margin-top:104px;display:grid;grid-template-columns:260px minmax(0,1fr);gap:56px;padding-top:32px;border-top:2px solid currentColor}
.ko-story .rec ul{list-style:none;margin:0;padding:0}
.ko-story .rec li{display:grid;grid-template-columns:180px minmax(0,1fr);gap:28px;padding:20px 0;border-bottom:1px solid rgba(23,22,26,.14);font-size:17px;line-height:1.55}
.ko-story .dark .rec li,.ko-story .ink2 .rec li{border-bottom-color:rgba(239,233,223,.14)}
.ko-story .orange .rec li{border-bottom-color:rgba(11,11,12,.22)}
.ko-story .rec .d{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:24px;line-height:1.1;text-transform:uppercase}
.ko-story .rec q{font-family:"Instrument Serif",Georgia,serif;font-style:italic;font-size:23px;line-height:1.3;quotes:"\201C" "\201D"}
.ko-story .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-story .dark .rec .src,.ko-story .ink2 .rec .src{color:#FF5A1F}
.ko-story .orange .rec .src{color:#0B0B0C}
.ko-story .rec .src:hover{text-decoration-thickness:2px}
.ko-story .joyce{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:96px;border-top:2px solid #17161A;border-bottom:2px solid #17161A}
.ko-story .joyce>div{padding:32px 32px 32px 0}
.ko-story .joyce>div+div{padding-left:32px;border-left:1px solid rgba(23,22,26,.16)}
.ko-story .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-story .helppill:hover{background:#FF5A1F;color:#0B0B0C}
.ko-story .idx{display:flex;align-items:center;gap:12px;min-height:40px;color:#A09A92;cursor:pointer}
.ko-story .idx .n{font-family:"Big Shoulders Display",Impact,sans-serif;font-weight:800;font-size:17px;width:26px;transition:color .3s}
.ko-story .idx .t{font-size:13px;font-weight:600;white-space:nowrap;max-width:0;overflow:hidden;opacity:0;transition:max-width .5s cubic-bezier(.16,1,.3,1),opacity .3s}
.ko-story .idx:hover{color:#EFE9DF}
.ko-story .idx:hover .t{max-width:180px;opacity:1}
.ko-story .idx[aria-current="step"]{color:#EFE9DF}
.ko-story .idx[aria-current="step"] .n{color:#FF5A1F}
.ko-story .idx[aria-current="step"] .t{max-width:180px;opacity:1}
@keyframes rise{from{transform:translateY(105%);opacity:0}to{transform:none;opacity:1}}
@keyframes fadeUp{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.ko-story .mask{display:inline-block;overflow:hidden;vertical-align:top}
.ko-story .ltr{display:inline-block;animation:rise 1.1s cubic-bezier(.16,1,.3,1) both}
.ko-story .fade{animation:fadeUp 1s cubic-bezier(.16,1,.3,1) both}
.ko-story .hl{background-image:linear-gradient(#FFB08F,#FFB08F);background-repeat:no-repeat;background-size:100% 100%;padding:0 .06em}
.ko-story .dark .hl,.ko-story .ink2 .hl{background-image:linear-gradient(#FF5A1F,#FF5A1F);color:#0B0B0C}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ko-story .mq{animation:mq 40s linear infinite}
@supports (animation-timeline: view()){.ko-story .prog{animation:grow linear both;animation-timeline:scroll(root)}
.ko-story .upin{animation:upIn linear both;animation-timeline:view();animation-range:entry 0% cover 25%}
.ko-story .reveal{animation:reveal linear both;animation-timeline:view();animation-range:entry 5% cover 40%}
.ko-story .parallax{animation:par linear both;animation-timeline:view()}
.ko-story .hl{animation:hl linear both;animation-timeline:view();animation-range:cover 25% cover 45%}
.ko-story .bar{animation:bar linear both;animation-timeline:view();animation-range:entry 20% cover 50%}
.ko-story .numin{animation:numIn linear both;animation-timeline:view();animation-range:entry 0% cover 35%}
.ko-story .bigslide{animation:bigslide linear both;animation-timeline:view()}}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes upIn{from{transform:translateY(60px);opacity:0}}
@keyframes reveal{from{clip-path:inset(14% 14% 14% 14%)}}
@keyframes par{from{transform:translateY(-50px) scale(1.1)}to{transform:translateY(50px) scale(1.1)}}
@keyframes hl{from{background-size:0% 100%}}
@keyframes bar{from{transform:scaleX(0)}}
@keyframes numIn{from{transform:translateX(-80px);opacity:0}}
@keyframes bigslide{from{transform:translateX(10%)}to{transform:translateX(-30%)}}
@media (prefers-reduced-motion: reduce){.ko-story *,.ko-story *::before,.ko-story *::after{animation:none!important;transition:none!important}
html:has(> body.ko-body-story){scroll-behavior:auto}}
@media (min-width: 900px) and (max-width: 1279px){.ko-story .ko-root{zoom:calc(100vw / 1280px)}}@supports not (zoom: calc(100vw / 1280px)){@media (min-width: 900px) and (max-width: 1279px){.ko-story .ko-root{zoom:.85}}}
/* phone layout, hand-written from the phone artboards (G1, G2, G4) */
@media (max-width: 899px) {
/* ---- page frame ---------------------------------------------------------
   One gutter for the whole phone page: 20px at 390 (the artboard), growing on
   wider phones and small tablets so lines stay about 640px long. */
.ko-story .ko-root{--ko-gut:max(20px, calc((100vw - 680px) / 2));display:flex;flex-direction:column;overflow-x:clip}
.ko-story .ko-root>*{order:3;min-width:0}
.ko-story .ko-root>[data-ko-sec="title"]{order:0}
.ko-story .ko-root>[data-ko-sec="content-note"]{order:1}
.ko-story .ko-root>[data-ko-sec="chapter-index"]{order:2}
.ko-story .label{font-size:11px;letter-spacing:.16em}

/* ---- title (MobileStory: TITLE) ---------------------------------------- */
.ko-story [data-ko-sec="title"]{height:auto!important;padding:116px var(--ko-gut) 40px}
.ko-story [data-ko-sec="title"]>img,
.ko-story [data-ko-sec="title"]>div[aria-hidden]{display:none}
.ko-story [data-ko-sec="title"]>div:not([aria-hidden]){position:static!important}
.ko-story [data-ko-sec="title"] .label.fade{margin-bottom:16px!important}
.ko-story [data-ko-sec="title"] h1{font-size:76px!important;line-height:.8!important}
.ko-story [data-ko-sec="title"] h1+div{display:block!important;margin-top:20px!important}
.ko-story [data-ko-sec="title"] h1+div p{max-width:none!important;font-size:23px!important;line-height:1.2!important}
.ko-story [data-ko-sec="title"] h1+div .label{margin-top:24px;text-align:left!important;line-height:1.9!important}

/* ---- content note ------------------------------------------------------- */
.ko-story [data-ko-sec="content-note"]{flex-direction:column!important;align-items:stretch!important;justify-content:flex-start!important;gap:14px!important;padding:20px var(--ko-gut) 22px!important}
.ko-story [data-ko-sec="content-note"] p{font-size:15px!important}
.ko-story [data-ko-sec="content-note"] a{align-self:flex-start;min-height:44px!important;padding:0 20px!important;font-size:14px}

/* ---- chapter index becomes the pill row -------------------------------- */
.ko-story nav[aria-label="Chapters"]{position:static!important;top:auto!important;left:auto!important;transform:none!important;z-index:auto!important;display:flex;gap:8px;overflow-x:auto;padding:16px var(--ko-gut)!important;border:0!important;border-radius:0!important;background:#0B0B0C!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;scrollbar-width:none;scroll-snap-type:x mandatory;scroll-padding-left:var(--ko-gut)}
.ko-story nav[aria-label="Chapters"]::-webkit-scrollbar{display:none}
.ko-story nav[aria-label="Chapters"] .idx{position:relative;flex:0 0 auto;scroll-snap-align:start;justify-content:center;gap:0;min-height:44px;padding:0 16px;border-radius:999px;border:1.5px solid rgba(239,233,223,.25);color:#CFC8BD}
.ko-story nav[aria-label="Chapters"] .idx:hover{border-color:#FF5A1F;color:#FF5A1F}
.ko-story nav[aria-label="Chapters"] .idx .n{width:auto;font-size:14px;letter-spacing:.04em}
.ko-story nav[aria-label="Chapters"] .idx .t{position:absolute;width:1px;height:1px;margin:-1px;max-width:none!important;opacity:1!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ---- shared chapter patterns (MobileStory: CHAPTER 01) ------------------ */
.ko-story .chap{padding:48px var(--ko-gut) 64px}
.ko-story .head{display:block!important;margin-bottom:28px!important}
.ko-story .num{font-size:108px;line-height:.76;-webkit-text-stroke-width:1.5px}
.ko-story .kick{margin-bottom:10px}
.ko-story .ttl{max-width:none!important;font-size:38px!important;line-height:.94!important}
.ko-story .sub{max-width:none!important;margin-top:12px!important;font-size:21px!important;line-height:1.2!important}
.ko-story .cols{display:flex!important;flex-direction:column;align-items:stretch!important;gap:36px}
.ko-story .sticky{position:static!important}
.ko-story .body{max-width:none!important}
.ko-story .body p{margin:0 0 20px;font-size:18px;line-height:1.65}
.ko-story .body p.lead::first-letter{font-size:58px;margin:4px 8px 0 0}
.ko-story .pq{max-width:none!important;font-size:28px!important;line-height:1.16!important}
.ko-story .pq .mark{font-size:60px;margin-bottom:4px}
.ko-story .photo .frame{height:320px!important}
.ko-story .photo figcaption{flex-direction:column;gap:2px;margin-top:12px}
.ko-story .photo figcaption .serif{font-size:21px!important}
.ko-story .stamp{display:block!important;padding:16px 0}
.ko-story .stamp>span:first-child{display:block;font-size:22px!important;line-height:1.1!important}
.ko-story .stamp>span+span{display:block;margin-top:6px;font-size:15px!important;line-height:1.5!important}
.ko-story .rec{display:block!important;margin-top:56px!important;padding-top:24px}
.ko-story .rec>div:first-child .disp{font-size:28px!important}
.ko-story .rec>div:first-child p{margin-top:10px!important;font-size:14px!important;line-height:1.5!important}
.ko-story .rec ul{margin-top:8px}
.ko-story .rec li{display:block;padding:18px 0;font-size:15px;line-height:1.5}
.ko-story .rec li:last-child{border-bottom:0}
.ko-story .rec .d{display:block;margin-bottom:6px;font-size:19px}
.ko-story .rec q{font-size:19px}
.ko-story .rec .src{font-size:11px;letter-spacing:.1em}

/* ---- 01 ------------------------------------------------------------------ */
.ko-story [data-ko-sec="01"] .cols{gap:36px}
.ko-story [data-ko-sec="01"]>.pq{margin-top:48px!important}
.ko-story .joyce{display:block!important;margin-top:48px!important;border-bottom:0!important}
.ko-story .joyce>div{padding:20px 0!important;border-left:0!important;border-top:1px solid rgba(23,22,26,.16)}
.ko-story .joyce>div:last-child{border-bottom:1px solid rgba(23,22,26,.16)}
.ko-story .joyce .disp{font-size:40px!important}
.ko-story .joyce p{margin-top:10px!important;font-size:15px!important;line-height:1.5!important}
.ko-story .joyce p.serif{margin-top:0!important;font-size:22px!important;line-height:1.2!important}
.ko-story [data-ko-sec="01"]>p{max-width:none!important;margin-top:40px!important;font-size:17px!important}

/* ---- track interlude (MobileStory: TRACK INTERLUDE) --------------------- */
.ko-story [data-ko-sec="interlude-track"]{padding-bottom:64px!important}
.ko-story [data-ko-sec="interlude-track"]>figure{height:460px!important}
.ko-story [data-ko-sec="interlude-track"] figcaption{display:block!important;left:var(--ko-gut)!important;right:var(--ko-gut)!important;bottom:20px!important}
.ko-story [data-ko-sec="interlude-track"] figcaption .label{margin-bottom:10px!important}
.ko-story [data-ko-sec="interlude-track"] figcaption h2{font-size:54px!important;line-height:.84!important}
.ko-story [data-ko-sec="interlude-track"] figcaption>.serif{display:block;max-width:none!important;margin-top:14px;font-size:19px!important;line-height:1.25;text-align:left!important}
.ko-story [data-ko-sec="interlude-track"]>div{padding:32px var(--ko-gut) 0!important}
.ko-story [data-ko-sec="interlude-track"] .pq{margin-bottom:32px!important}
.ko-story [data-ko-sec="interlude-track"] .cols{gap:8px}
.ko-story [data-ko-sec="interlude-track"] .sticky>.label{margin-bottom:4px!important}

/* ---- 02: the wait-time chart -------------------------------------------- */
.ko-story [data-ko-sec="02"]>div.upin:not(.head){margin-top:56px!important;padding-top:32px!important}
.ko-story [data-ko-sec="02"]>div.upin:not(.head)>.label{margin-bottom:24px!important}
.ko-story [data-ko-sec="02"] div[style*="grid-template-columns: 300px"]{display:block!important;margin-bottom:24px!important}
.ko-story [data-ko-sec="02"] div[style*="grid-template-columns: 300px"]>.disp{margin-bottom:10px;font-size:24px!important}
.ko-story [data-ko-sec="02"] div[style*="grid-template-columns: 300px"]>div{gap:14px!important}
.ko-story [data-ko-sec="02"] .bar{height:32px!important}
.ko-story [data-ko-sec="02"] div[style*="grid-template-columns: 300px"] span.disp{font-size:30px!important}
.ko-story [data-ko-sec="02"] div.upin>.pq{margin-top:40px!important}

/* ---- 03 ------------------------------------------------------------------ */
.ko-story [data-ko-sec="03"] .body>div.upin{margin-top:32px!important}
.ko-story [data-ko-sec="03"] .photo{padding:12px 12px 16px!important}
.ko-story [data-ko-sec="03"] .photo .frame{height:300px!important}

/* ---- 04: portrait moves to the top of the chapter ------------------------ */
.ko-story [data-ko-sec="04"]{padding-top:280px!important;padding-bottom:64px!important}
.ko-story [data-ko-sec="04"]>img{width:100%!important;height:420px!important;opacity:.55!important}
.ko-story [data-ko-sec="04"]>div[aria-hidden]{background:linear-gradient(180deg,rgba(21,21,23,.1) 0,rgba(21,21,23,.75) 240px,#151517 420px)!important}
.ko-story [data-ko-sec="04"]>div:not([aria-hidden]){max-width:none!important}
.ko-story [data-ko-sec="04"] .head{margin-bottom:28px!important}
.ko-story [data-ko-sec="04"] .pq{margin-bottom:32px!important;font-size:32px!important;line-height:1.12!important}
.ko-story [data-ko-sec="04"] figure{max-width:none!important;margin-top:40px!important;padding-top:24px!important}
.ko-story [data-ko-sec="04"] figure .label{margin-bottom:14px!important}
.ko-story [data-ko-sec="04"] figure blockquote{font-size:22px!important;line-height:1.25!important}
.ko-story [data-ko-sec="04"] figure blockquote+blockquote{margin-top:18px!important}
.ko-story [data-ko-sec="04"] figcaption{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}
.ko-story [data-ko-sec="04"] figcaption .disp{font-size:30px!important;line-height:1!important}
.ko-story [data-ko-sec="04"] figcaption a{display:inline-flex;align-items:center;min-height:44px}
.ko-story [data-ko-sec="04"] div.upin[style*="border: 1.5px"]{max-width:none!important;margin-top:32px!important;padding:20px 18px!important;gap:14px!important}
.ko-story [data-ko-sec="04"] div.upin[style*="border: 1.5px"] p{font-size:16px!important}

/* ---- 05: timeline in two columns ---------------------------------------- */
.ko-story [data-ko-sec="05"] ol{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:0 16px!important;margin-top:56px!important}
.ko-story [data-ko-sec="05"] ol li{padding:16px 0 12px!important}
.ko-story [data-ko-sec="05"] ol li:nth-child(n+3){border-top:1px solid rgba(23,22,26,.16)}
.ko-story [data-ko-sec="05"] ol .disp{font-size:44px!important}
.ko-story [data-ko-sec="05"] ol .disp+div{margin-top:6px!important;font-size:15px!important}

/* ---- 06: revenue chart and full-bleed crew photo ------------------------- */
.ko-story [data-ko-sec="06"] .sticky div[style*="height: 380px"]{height:240px!important;gap:16px!important}
.ko-story [data-ko-sec="06"] .sticky span.disp{font-size:34px!important;margin-bottom:8px!important}
.ko-story [data-ko-sec="06"] .sticky div[style*="margin-top: 12px"]{gap:16px!important}
.ko-story [data-ko-sec="06"] .sticky p.serif{margin-top:24px!important;font-size:21px!important}
.ko-story [data-ko-sec="06"]>figure{margin:48px calc(-1 * var(--ko-gut)) 0!important}
.ko-story [data-ko-sec="06"]>figure .frame{height:260px!important}
.ko-story [data-ko-sec="06"]>figure figcaption{padding:12px var(--ko-gut) 40px!important}

/* ---- 07 ------------------------------------------------------------------ */
.ko-story [data-ko-sec="07"] .bigslide{top:28px!important;font-size:110px!important}
.ko-story [data-ko-sec="07"]>.pq{margin-bottom:40px!important;font-size:36px!important;line-height:1.05!important}
.ko-story [data-ko-sec="07"] .sticky>div{gap:12px!important;margin-top:24px!important}
.ko-story [data-ko-sec="07"] .sticky>div>div{padding:16px!important}
.ko-story [data-ko-sec="07"] .sticky>div .disp{font-size:44px!important}

/* ---- 08 ------------------------------------------------------------------ */
.ko-story [data-ko-sec="08"]>figure{margin-bottom:40px!important}
.ko-story [data-ko-sec="08"]>figure .frame{height:280px!important}
.ko-story [data-ko-sec="08"] .cols{gap:8px}
.ko-story [data-ko-sec="08"] .sticky>.label{margin-bottom:4px!important}

/* ---- 09 ------------------------------------------------------------------ */
.ko-story [data-ko-sec="09"]{padding-bottom:72px!important}
.ko-story [data-ko-sec="09"] .body p{font-size:20px!important;line-height:1.55!important}
.ko-story [data-ko-sec="09"]>div.upin[style*="padding: 40px"]{max-width:none!important;margin-top:48px!important;padding:24px 20px!important}
.ko-story [data-ko-sec="09"]>div.upin[style*="padding: 40px"] p{font-size:17px!important;line-height:1.6!important;margin-bottom:18px!important}
.ko-story [data-ko-sec="09"]>div.upin[style*="padding: 40px"] p.serif{margin-bottom:0!important;font-size:26px!important;line-height:1.15!important}
.ko-story [data-ko-sec="09"]>div.upin[style*="margin-top: 72px"]{margin-top:48px!important}
.ko-story [data-ko-sec="09"]>div.upin[style*="margin-top: 72px"] .disp{font-size:min(44px, calc((100vw - 40px) * .125))!important;line-height:.88!important}

/* ---- end (MobileStory: HELP BAND and CLOSER) ----------------------------- */
.ko-story [data-ko-sec="end"]{padding:96px var(--ko-gut) 40px!important}
.ko-story [data-ko-sec="end"] .mq{top:28px!important;gap:28px!important;font-size:40px!important}
.ko-story [data-ko-sec="end"] h2{margin-top:0!important;font-size:40px!important;line-height:1.04!important}
.ko-story [data-ko-sec="end"] h2+div{flex-direction:column!important;align-items:stretch!important;gap:12px!important;margin-top:32px!important}
.ko-story [data-ko-sec="end"] h2+div a{display:flex!important;justify-content:center;min-height:56px!important;padding:0 22px!important;font-size:17px!important}
.ko-story [data-ko-sec="end"] div[style*="margin-top: 104px"]{margin-top:56px!important}
.ko-story [data-ko-sec="end"] .helpband{display:flex!important;flex-direction:column;gap:10px!important}
.ko-story [data-ko-sec="end"] .helpband>div{padding:0 0 10px!important}
.ko-story [data-ko-sec="end"] .helpband>div .disp{font-size:34px!important;line-height:.96!important}
.ko-story [data-ko-sec="end"] .helpband>a{min-height:104px;padding:18px!important}
.ko-story [data-ko-sec="end"] .helpband>a[href^="tel"] .disp{font-size:52px!important}
.ko-story [data-ko-sec="end"] .helpband>a[href^="sms"] .disp{font-size:40px!important}
.ko-story [data-ko-sec="end"] .helpband>a:last-child .disp{font-size:30px!important}
.ko-story [data-ko-sec="end"]>p{margin-top:40px!important;padding-top:24px!important}
}

/* Photos show whole, never cropped (Khary 2026-09-23: faces were cut off at every width).
   Chapter photos keep their own shape; the frame follows the photo instead of forcing a
   fixed height. The track interlude keeps its crop: its title sits on the photo. */
html body .ko-story [data-ko-sec] .photo .frame{height:auto!important}
html body .ko-story [data-ko-sec] .photo .frame img{height:auto!important;object-fit:contain;animation:none!important;transform:none!important;translate:none!important}
@media (min-width: 900px){
  /* The photo column never drops below 340 px (it was 216 px at a 1280 px screen). */
  html body .ko-story .cols{grid-template-columns:minmax(0,680px) minmax(340px,1fr)}
  /* The kids photo is nearly square; full width would make it taller than a screen. */
  html body .ko-story [data-ko-sec="08"]>figure{max-width:900px}
  /* In the narrow photo column the caption stacks instead of squeezing into two columns. */
  html body .ko-story .cols .photo figcaption{flex-direction:column;gap:4px}
}
@media (max-width: 899px){
  /* Tablets: tall portraits would run close to 1,000 px high at full column width. */
  html body .ko-story [data-ko-sec] .photo .frame{max-width:560px}
  /* The team photo is a wide edge-to-edge band; it keeps the full width. */
  html body .ko-story [data-ko-sec="06"]>figure.photo .frame{max-width:none}
}

/* Track interlude (Khary 2026-09-24: "my face is cut off and you can't see the blue leggings").
   He is the runner on the far left; the band crop cut his head and legs and the title sat on top
   of him. The photo now shows whole (fit to the screen height on very wide screens) and the
   title and caption sit below it. */
html body .ko-story [data-ko-sec="interlude-track"]>figure{height:auto!important;overflow:visible!important;background:#0B0B0C}
html body .ko-story [data-ko-sec="interlude-track"]>figure>img{height:auto!important;max-height:92vh;object-fit:contain!important;animation:none!important;transform:none!important;translate:none!important}
html body .ko-story [data-ko-sec="interlude-track"]>figure>div[aria-hidden]{display:none!important}
html body .ko-story [data-ko-sec="interlude-track"]>figure>figcaption{position:static!important;padding:48px 96px 0 200px}
@media (max-width: 899px){
  html body .ko-story [data-ko-sec="interlude-track"]>figure>figcaption{padding:28px var(--ko-gut) 0!important}
}

/* Scroll reveals finish within 160 px of entering the screen (Khary 2026-09-24: text looked dim,
   "That is backwards." was missing, the Months bar stopped short). Scroll-linked reveals froze
   half-done wherever the reader stopped; now anything on screen to read is in its final state. */
html body .ko-story :is(.upin,.reveal,.numin,.hl,.bar){animation-range:entry 0% entry 160px!important}

/* Wide screens (Khary 2026-09-24: "still a ton of open space"). Chapters were drawn at 1440 px and
   anchored left, so every extra pixel piled up on the right. Past 1440 px each chapter now centers
   its 1440 px composition. The track interlude keeps its full-width photo. */
@media (min-width: 1441px){
  html body .ko-story .chap:not([data-ko-sec="interlude-track"]){padding-left:calc((100vw - 1440px) / 2 + 200px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
  html body .ko-story [data-ko-sec="interlude-track"]>div{padding-left:calc((100vw - 1440px) / 2 + 200px)!important;padding-right:calc((100vw - 1440px) / 2 + 96px)!important}
  html body .ko-story [data-ko-sec="interlude-track"]>figure>figcaption{padding-left:calc((100vw - 1440px) / 2 + 200px);padding-right:calc((100vw - 1440px) / 2 + 96px)}
}
@media (min-width: 1280px){
  /* Chapter 09 is one reading column (860 px); it centers instead of hugging the left edge. */
  html body .ko-story .chap[data-ko-sec="09"]{padding-left:max(200px, calc((100vw - 1000px) / 2))!important;padding-right:max(96px, calc((100vw - 1000px) / 2))!important}
}

/* Help line after chapter 01 froze at 56 to 73% opacity on phones (found 2026-09-24 by the stage 3 audit):
   chapter 01 is overflow:hidden, which makes it a scroll container, so its reveals followed that box instead
   of the page (chapter 04's 988 line too). overflow:clip clips the same way without that. Phones only: on desktop the chapter's sticky
   photo column would start sticking, a change nobody has reviewed. */
@media (max-width: 899px){
  html body .ko-story [data-ko-sec]:is([style*="overflow: hidden"], .chap){overflow:clip!important}
  /* chapter numerals are inline boxes shorter than their glyphs, so they finish a little later; start them sooner */
  html body .ko-story .numin{animation-range:entry 0% entry 100px!important}
}

/* Bigger chapter photos (Khary 2026-09-25: "a lot of open space here, but the picture of my mom is rather small").
   The photo column was 376 px at 1440 and never grew on wider screens. From 1280 px the gap and right margin
   tighten so the photo takes the room; past 1440 px chapters with a photo widen to a 1680 px composition
   (photo up to about 700 px). Tall portraits cap at 85% of the screen height and still show whole. */
@media (min-width: 1280px){
  html body .ko-story .chap:has(.cols .photo) .cols{grid-template-columns:minmax(0,680px) minmax(340px,1fr);column-gap:56px}
  html body .ko-story .chap:has(.cols .photo){padding-right:48px!important}
  html body .ko-story .cols .photo img{max-height:85vh;width:auto!important;max-width:100%}
}
@media (min-width: 1441px){
  html body .ko-story .chap:not([data-ko-sec="interlude-track"]):has(.cols .photo){padding-left:max(200px, calc((100vw - 1680px) / 2 + 200px))!important;padding-right:max(48px, calc((100vw - 1680px) / 2 + 48px))!important}
}