/* Innovative Freedom, Round 3 (rebuilt). Printed-programme feel: paper, ink, one flat gold. */
:root{
  --paper:#f4eee0; --paper-2:#fbf7ec; --ink:#17150f; --ink-2:#55503f; --gold:#e8b100; --gold-deep:#8a6500;
  --soft:rgba(23,21,15,.18);
  --serif:"Newsreader",Georgia,serif; --sans:"Hanken Grotesk",system-ui,sans-serif;
  --gut:22px;
}
@media (min-width:760px){:root{--gut:48px}}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 clamp(1.02rem,.5vw + .9rem,1.15rem)/1.6 var(--sans);overflow-x:hidden;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .09  0 0 0 0 .08  0 0 0 0 .05  0 0 0 .07 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{width:min(1180px,100% - var(--gut)*2);margin-inline:auto}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}

h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:-.02em;text-wrap:balance}
h1{font-size:clamp(3.1rem,8.4vw,7.6rem);line-height:.94}
h2{font-size:clamp(2.3rem,5vw,4.4rem);line-height:1}
h3{font-size:clamp(1.4rem,2.2vw,1.9rem);line-height:1.1;letter-spacing:-.01em}
em{font-style:italic}
.big{font:400 clamp(1.7rem,3.4vw,3rem)/1.18 var(--serif);letter-spacing:-.015em;max-width:24ch;text-wrap:balance}
.small{font-size:.92rem;color:var(--ink-2)}
.cap{font:italic 400 .95rem/1.4 var(--serif);color:var(--ink-2);margin-top:.7rem;max-width:34ch}
.cap strong{font:600 .72rem/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;font-style:normal;color:var(--ink);display:block;margin-bottom:.3rem}

/* links and buttons: plain */
.go{font-weight:600;text-decoration:none;border-bottom:2px solid var(--gold);padding-bottom:3px;transition:background .2s}
.go::after{content:" \2192"}
.go:hover{background:var(--gold)}
.btn{display:inline-block;font:600 1rem/1 var(--sans);text-decoration:none;padding:1.05rem 1.6rem;border:1.5px solid var(--ink);background:var(--ink);color:var(--paper);transition:background .2s,color .2s;cursor:pointer}
.btn:hover{background:var(--gold);color:var(--ink)}
.actions{display:flex;flex-wrap:wrap;gap:14px 28px;align-items:center}

/* header */
header.site{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--paper) 92%,transparent);backdrop-filter:blur(8px);border-bottom:1.5px solid var(--ink)}
.nav{display:flex;align-items:center;gap:34px;height:70px}
.brand img{height:34px;width:auto}
.nav ul{display:flex;gap:30px;list-style:none;padding:0;margin-left:auto}
.nav li a{text-decoration:none;font-weight:500;font-size:.98rem;padding:6px 0;border-bottom:2px solid transparent}
.nav li a:hover{border-color:var(--ink)}.nav li a[aria-current]{border-color:var(--gold)}
.menu-btn{display:none;margin-left:auto;background:none;border:0;color:var(--ink);padding:8px}
@media (max-width:900px){
  .nav ul{display:none;position:absolute;left:0;right:0;top:70px;background:var(--paper);flex-direction:column;gap:0;padding:6px var(--gut) 18px;border-bottom:1.5px solid var(--ink)}
  .nav ul.open{display:flex}.nav li a{display:block;padding:15px 0;font:500 1.5rem var(--serif);border-bottom:1px solid var(--soft)}
  .menu-btn{display:block}.nav>.go{display:none}
}

/* the course */
.course{position:fixed;z-index:20;left:6px;top:96px;bottom:26px;width:1.5px;background:var(--soft);pointer-events:none}
.course i{position:absolute;left:0;top:0;width:1.5px;height:var(--p,0%);background:var(--gold)}
.course b{position:absolute;left:-5px;top:var(--p,0%);width:11px;height:11px;margin-top:-6px;border-radius:50%;background:var(--gold);border:1.5px solid var(--ink)}
@media (min-width:1300px){.course{left:30px}}

/* photo slots: honest placeholders, like a layout sheet */
.slot{position:relative;aspect-ratio:3/4;border:1.5px solid var(--ink);background:var(--paper-2);border-radius:999px 999px 0 0;overflow:hidden;display:grid;place-items:center;padding:0 16%;text-align:center}
.slot::after{content:"";position:absolute;inset:-3%;
  background:linear-gradient(to top right,transparent calc(50% - .75px),var(--soft) 50%,transparent calc(50% + .75px)),linear-gradient(to top left,transparent calc(50% - .75px),var(--soft) 50%,transparent calc(50% + .75px));
  animation:breathe 10s ease-in-out infinite alternate}
.slot span{position:relative;z-index:1;font:italic 400 1rem/1.35 var(--serif);background:var(--paper-2);padding:.3em .55em}
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:breathe 10s ease-in-out infinite alternate}
@keyframes breathe{from{transform:scale(1)}to{transform:scale(1.04)}}
.slot.rect{border-radius:0}.slot.wide{aspect-ratio:4/3;border-radius:0}.slot.head{aspect-ratio:4/5}

/* hero gate */
.hero{padding:clamp(36px,6vw,84px) 0 clamp(56px,8vw,110px)}
.hero .wrap{display:grid;gap:40px;align-items:end}
@media (min-width:980px){.hero .wrap{grid-template-columns:repeat(12,1fr);gap:0 24px}.hero .copy{grid-column:1/9;grid-row:1;position:relative;z-index:3;align-self:center}.hero .gatewrap{grid-column:8/13;grid-row:1;position:relative;z-index:1}}
.hero h1{margin-bottom:clamp(24px,3vw,40px)}
.hero p.lede{max-width:34ch;font-size:clamp(1.05rem,.8vw + .9rem,1.3rem);line-height:1.45;margin-bottom:28px}
.gatewrap{justify-self:center;width:min(400px,84vw)}
.gate{position:relative;aspect-ratio:400/520}
.gate .slot{position:absolute;inset:0;border-radius:999px 999px 0 0;opacity:0;animation:fadeIn .8s 1s forwards;padding:0}
.gate svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.gate path{fill:none;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.gate .arch{stroke:var(--gold);stroke-width:7;transform:translate(18px,16px);animation:draw 1.6s .1s cubic-bezier(.6,.05,.2,1) forwards}
.gate .run{stroke:var(--ink);stroke-width:3;animation:draw 1.8s 1s cubic-bezier(.5,.05,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
.rise{opacity:0;transform:translateY(28px);animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards}
.rise.d1{animation-delay:.2s}.rise.d2{animation-delay:.4s}.rise.d3{animation-delay:.6s}
@keyframes rise{to{opacity:1;transform:none}}
.js .reveal{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.js .reveal.in{opacity:1;transform:none}

/* sections */
section.s{padding:clamp(60px,9vw,130px) 0;border-top:1.5px solid var(--ink)}
.statement .wrap{display:grid;gap:24px}
@media (min-width:900px){.statement .wrap{grid-template-columns:repeat(12,1fr)}.statement .big{grid-column:3/11}.statement .small{grid-column:3/8}}
.figs{display:flex;flex-direction:column;gap:44px;margin-top:clamp(28px,4vw,60px)}
@media (min-width:760px){.figs{flex-direction:row;align-items:flex-start;gap:clamp(22px,4vw,64px)}
  .figs>:nth-child(1){flex:1.45}.figs>:nth-child(2){flex:1;margin-top:clamp(40px,8vw,120px)}.figs>:nth-child(3){flex:.85;margin-top:clamp(10px,3vw,40px)}}
.ink{background:var(--ink);color:var(--paper);border-top:0}
.ink .slot{border-color:var(--paper);background:#211e16}.ink .slot span{background:#211e16}
.ink .slot::after{background:linear-gradient(to top right,transparent calc(50% - .75px),rgba(244,238,224,.22) 50%,transparent calc(50% + .75px)),linear-gradient(to top left,transparent calc(50% - .75px),rgba(244,238,224,.22) 50%,transparent calc(50% + .75px))}
.ink .go:hover{color:var(--ink)}.ink .small,.ink .cap{color:rgba(244,238,224,.72)}.ink .cap strong{color:var(--paper)}
.tkblock{padding:clamp(60px,9vw,120px) 0 0}
.tkblock .wrap{display:grid;gap:40px;align-items:end}
@media (min-width:900px){.tkblock .wrap{grid-template-columns:1.1fr .9fr}}
.tkblock .copy{padding-bottom:clamp(10px,8vw,120px);display:grid;gap:22px;justify-items:start}
.tkblock .slot{border-bottom:0;max-width:440px;width:100%;justify-self:end}
.close{padding:clamp(70px,10vw,140px) 0}
.close .wrap{display:grid;gap:26px}

/* our work */
.stairs{list-style:none;padding:0}
.stairs li{display:grid;gap:6px 36px;padding:clamp(18px,2.4vw,30px) 0;border-top:1px solid var(--soft)}
.stairs li:first-child{border-top:1.5px solid var(--ink)}
@media (min-width:860px){.stairs li{grid-template-columns:1fr 1fr;align-items:baseline}
  .stairs li:nth-child(2){margin-left:4%}.stairs li:nth-child(3){margin-left:8%}.stairs li:nth-child(4){margin-left:12%}.stairs li:nth-child(5){margin-left:16%}}
.stairs h3{font-size:clamp(1.7rem,3vw,2.6rem)}
.stairs p{color:var(--ink-2)}
.path{display:grid;gap:30px;position:relative}
@media (min-width:760px){.path{grid-template-columns:repeat(3,1fr);gap:48px}.path::before{content:"";position:absolute;left:0;right:0;top:9px;height:1.5px;background:var(--paper);opacity:.5}}
.path div{position:relative;padding-top:34px}
.path div::before{content:"";position:absolute;left:0;top:0;width:19px;height:19px;border-radius:50%;background:var(--gold);border:1.5px solid var(--paper)}
.path h3{margin-bottom:.35rem}

/* team kenya */
.count{display:flex;gap:clamp(18px,4vw,56px);flex-wrap:wrap}
.count strong{display:block;font:500 clamp(3rem,8vw,6.6rem)/.9 var(--serif);font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.03em}
.count small{font:600 .72rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.roster{display:grid;gap:36px 22px;grid-template-columns:repeat(2,1fr);align-items:start}
@media (min-width:860px){.roster{grid-template-columns:repeat(4,1fr);gap:44px 28px}.roster>:nth-child(4n+2){margin-top:60px}.roster>:nth-child(4n+3){margin-top:22px}.roster>:nth-child(4n+4){margin-top:84px}}
.note{font-size:.88rem;color:var(--ink-2);max-width:60ch;margin-top:3rem;padding-top:1rem;border-top:1px solid var(--soft)}

/* about */
.about-grid{display:grid;gap:40px}
@media (min-width:900px){.about-grid{grid-template-columns:repeat(12,1fr);gap:0 28px}.about-grid>:first-child{grid-column:1/5}.about-grid>:last-child{grid-column:6/13}}
.beliefs{columns:1;column-gap:48px}
@media (min-width:760px){.beliefs{columns:2}}
.beliefs p{break-inside:avoid;margin-bottom:1.6rem}
.beliefs h3{margin-bottom:.3rem}
.people{display:grid;gap:34px 22px;grid-template-columns:repeat(2,1fr)}
@media (min-width:860px){.people{grid-template-columns:repeat(4,1fr)}.people>:nth-child(even){margin-top:46px}}

/* finish line */
.finish{padding:clamp(48px,8vw,100px) 0 8px;overflow:hidden}
.track{position:relative;height:80px;margin-top:64px}
.post{position:absolute;top:-22px;bottom:-22px;width:16px;background:repeating-conic-gradient(var(--ink) 0 25%,var(--paper) 0 50%) 0 0/8px 8px;border:1.5px solid var(--ink)}
.post.l{left:0}.post.r{right:0}
.tape{position:absolute;top:30px;height:15px;width:calc(50% - 16px);background:var(--gold);border-block:1.5px solid var(--ink);will-change:transform}
.tape.l{left:16px;transform-origin:left center;transform:scaleX(var(--k,1)) rotate(calc((1 - var(--k,1)) * 6deg))}
.tape.r{right:16px;transform-origin:right center;transform:scaleX(var(--k,1)) rotate(calc((1 - var(--k,1)) * -6deg))}
.journeys{display:grid;gap:0}
.journey{display:flex;flex-direction:column;gap:20px;align-items:flex-start;padding:clamp(28px,4vw,48px) 0}
.journey+.journey{border-top:1.5px solid var(--ink)}
@media (min-width:860px){.journeys{grid-template-columns:1fr 1fr}.journey+.journey{border-top:0;border-left:1.5px solid var(--ink);padding-left:clamp(28px,5vw,72px)}.journey:first-child{padding-right:clamp(28px,5vw,72px)}}
.journey ul{padding-left:1.1rem;color:var(--ink-2)}
.signup{display:flex;flex-wrap:wrap;gap:14px 22px;align-items:flex-end;width:100%}
.signup input{flex:1 1 220px;min-width:0;font:inherit;padding:.7rem 0;border:0;border-bottom:1.5px solid var(--ink);background:transparent;color:inherit;border-radius:0}
.signup input:focus{outline:0;border-bottom-color:var(--gold)}
.thanks{min-height:1.4em;font-size:.9rem;color:var(--gold-deep)}

footer.site{border-top:1.5px solid var(--ink);padding:48px 0 34px}
.foot{display:grid;gap:30px}
@media (min-width:760px){.foot{grid-template-columns:1.4fr 1fr 1fr}}
.foot img{height:34px;width:auto;margin-bottom:12px}
.foot ul{list-style:none;padding:0;display:grid;gap:8px}.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.fine{margin-top:34px;padding-top:16px;border-top:1px solid var(--soft);font-size:.8rem;color:var(--ink-2)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition:none!important}
  .gate path{stroke-dashoffset:0}.gate .slot,.rise{opacity:1;transform:none}
}
@media (min-width:900px){.statement .wrap>.figs,.statement .wrap>p:last-child{grid-column:1/-1}}
.gatewrap .cap{margin-top:34px}