:root{--ink:#16140f;--soft:#6b675e;--line:rgba(22,20,15,.16);--page:#efede8;--ember:#d8400f;--gut:clamp(16px,3.4vw,52px);--T:9}
*{box-sizing:border-box;margin:0}
html{background:var(--page);-webkit-text-size-adjust:100%}
body{background:var(--page);color:var(--ink);font-family:Archivo,"Helvetica Neue",Arial,sans-serif;font-stretch:100%;overflow-x:clip;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
a:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.story{position:relative;background:var(--page)}
.stage{position:relative}
.first{position:relative;overflow:hidden}
.first::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.05;-webkit-mask-image:linear-gradient(#000 72%,transparent);mask-image:linear-gradient(#000 72%,transparent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
h1{font-weight:640;font-stretch:80%;letter-spacing:-.042em;line-height:.84}

.back{position:absolute;z-index:6;right:var(--gut);top:clamp(14px,3vh,30px);display:flex;gap:clamp(16px,2vw,30px);font-size:clamp(16px,1.3vw,20px);font-weight:540;letter-spacing:-.01em}
.back a,.go a,.links a{position:relative;padding:6px 0}
.back a::after,.go a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:2px;background:var(--ember);transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.back a:hover::after,.back a:focus-visible::after,.go a:hover::after,.go a:focus-visible::after{transform:scaleX(1)}

.line{font-size:clamp(20px,1.9vw,30px);line-height:1.12;font-weight:560;letter-spacing:-.016em;font-stretch:92%}
.ev{margin-top:clamp(6px,.7vw,10px);font-size:clamp(16px,1.2vw,19px);line-height:1.26;font-weight:470;letter-spacing:-.008em;text-wrap:pretty}
.note{margin-top:clamp(6px,.6vw,9px);font-size:clamp(13px,.92vw,14.5px);line-height:1.3;color:var(--soft);text-wrap:pretty}

/* Commits by month: one series, so no legend. Bars grow from a shared baseline. */
.commits{--u:calc(1 / 852);display:flex;align-items:flex-end;gap:2px;height:clamp(58px,10vh,92px);width:clamp(210px,21vw,320px);padding-bottom:18px;position:relative;border-bottom:0}
.commits i{position:relative;flex:1;height:calc(var(--v)*var(--u)*100%);min-height:3px;background:#8a867c;border-radius:3px 3px 0 0;font-style:normal}
.commits i.now{background:var(--ember)}
.commits i::before{content:attr(data-m);position:absolute;left:50%;top:100%;transform:translateX(-50%);font-size:12px;line-height:18px;color:var(--soft);white-space:nowrap}
.commits i[data-m=March]::before,.commits i[data-m=May]::before{content:"M"}
.commits i[data-m=April]::before,.commits i[data-m=August]::before{content:"A"}
.commits i[data-m=June]::before,.commits i[data-m=July]::before{content:"J"}
.commits i[data-m=September]::before{content:"S"}
.commits i[data-m=October]::before{content:"O"}
.commits i.lab::after{content:attr(style);display:none}
.commits i[data-m=May]::after,.commits i[data-m=October]::after{display:block;position:absolute;left:50%;bottom:100%;transform:translateX(-50%);font-size:13px;line-height:17px;font-weight:600;color:var(--ink)}
.commits i[data-m=May]::after{content:"456"}
.commits i[data-m=October]::after{content:"852"}
.commits i:hover{background:var(--ink)}
.commits i.now:hover{background:var(--ember)}
.commits i[data-m=March]:hover::after{content:"March, 21";display:block}
.commits i[data-m=April]:hover::after{content:"April, 138";display:block}
.commits i[data-m=June]:hover::after{content:"June, 113";display:block}
.commits i[data-m=July]:hover::after{content:"July, 177";display:block}
.commits i[data-m=August]:hover::after{content:"August, 216";display:block}
.commits i[data-m=September]:hover::after{content:"September, 276";display:block}
.commits i:hover::after{position:absolute;left:50%;bottom:100%;transform:translateX(-50%);white-space:nowrap;font-size:13px;line-height:17px;font-weight:600;color:var(--ink)}

/* A build */
.entries,.before{padding:0 var(--gut)}
.entry{padding:clamp(28px,5vh,56px) 0;border-top:2px solid var(--ink)}
.nm{font-size:clamp(38px,5vw,84px);line-height:.92;font-weight:640;font-stretch:80%;letter-spacing:-.036em;text-wrap:balance}
.what{margin-top:clamp(8px,1vw,14px);font-size:clamp(18px,1.72vw,27px);line-height:1.16;font-weight:500;letter-spacing:-.014em;text-wrap:pretty}
.entry dl{margin-top:clamp(12px,1.6vw,26px);border-top:1px solid var(--line)}
.entry dl>div{display:grid;grid-template-columns:5.2em minmax(0,1fr);gap:12px;padding:clamp(7px,.72vw,11px) 0 clamp(8px,.8vw,12px);border-bottom:1px solid var(--line)}
.entry dt{font-size:clamp(15px,1.12vw,17px);line-height:1.28;color:var(--soft);font-weight:500}
.entry dd{margin:0;font-size:clamp(15px,1.16vw,18px);line-height:1.28;font-weight:470;letter-spacing:-.006em;text-wrap:pretty}
.links{margin-top:clamp(10px,1.1vw,18px);display:flex;flex-wrap:wrap;gap:6px clamp(18px,2vw,30px);font-size:clamp(18px,1.5vw,23px);font-weight:580;letter-spacing:-.014em}
.links a{border-bottom:2px solid var(--ember);padding:2px 0}
.links a:hover{color:var(--ember)}
.group{padding:clamp(40px,8vh,90px) 0 clamp(16px,3vh,30px);font-size:clamp(46px,8vw,136px);line-height:.9;font-weight:640;font-stretch:80%;letter-spacing:-.04em;text-wrap:balance}

/* Designed static pictures */
.pic img{display:block;width:100%;height:auto;border-radius:6px;box-shadow:0 22px 40px -24px rgba(30,25,15,.55)}
.pic{max-width:720px}
.pic.strip{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;max-width:760px}
.type{aspect-ratio:16/10;border-radius:6px;padding:5%;color:#f5f3ee;display:flex;flex-direction:column;justify-content:flex-end;font-weight:640;font-stretch:80%;letter-spacing:-.03em;line-height:1;font-size:clamp(28px,5vw,64px)}
.type b{display:block;font-weight:inherit}
.type.hn{background:linear-gradient(135deg,#191714,#0d0c0a)}
.type.hn s{color:#6f6b63;text-decoration-color:var(--ember);text-decoration-thickness:.06em}
.type.ca{aspect-ratio:3/4;max-width:360px;background:radial-gradient(90% 60% at 30% 100%,#ff8a2a,#d8400f 40%,#4b0d17 72%,#0d0814)}
.type.ca i{display:block;width:44%;height:.5em;background:#f7f4ee;margin-bottom:auto}

footer{padding:clamp(30px,7vh,70px) var(--gut) clamp(22px,4vh,40px);display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;border-top:1px solid var(--line);background:var(--page)}
footer b{font-weight:640;font-stretch:80%;letter-spacing:-.04em;font-size:clamp(48px,9vw,136px);line-height:.88}
.go{display:flex;flex-wrap:wrap;gap:6px clamp(18px,2.2vw,34px);font-size:clamp(17px,1.72vw,24px);font-weight:560;letter-spacing:-.012em;padding-bottom:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}