@font-face{font-family:Kalam;src:url(fonts/hand.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:Kalam;src:url(fonts/hand-bold.woff2) format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/serif.woff2) format("woff2");font-weight:200 900;font-display:swap}
@font-face{font-family:"Source Serif";src:url(fonts/serif-italic.woff2) format("woff2");font-weight:200 900;font-style:italic;font-display:swap}

:root{--paper:#efe8d8;--paper-2:#e6decb;--ink:#1f1c19;--soft:#5f574b;--line:#c9bfa9;--red:#b3201f;--blue:#22288a;
  --hand:Kalam,"Segoe Print",cursive;--read:"Source Serif",Georgia,serif;--gutter:clamp(16px,4vw,48px)}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;color:var(--ink);font:400 1.14rem/1.6 var(--read);background-color:var(--paper);
  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='.85' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .25 0 0 0 0 .18 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.18em}
a:hover{color:var(--red)}
:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
h1,h2,h3,h4,h5{font-family:var(--hand);font-weight:700;line-height:1.15;margin:0}
.skip{position:absolute;left:-999px;background:var(--ink);color:var(--paper);padding:8px 14px;z-index:9}
.skip:focus{left:8px;top:8px}

.top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 20px;padding:14px var(--gutter) 0;font-family:var(--hand)}
.brand{font-size:1.5rem;font-weight:700;text-decoration:none;transform:rotate(-1.2deg)}
.top nav{display:flex;flex-wrap:wrap;gap:2px 18px;font-size:1.12rem}
.top nav a{text-decoration:none}
.top nav a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

.intro{display:flex;gap:clamp(14px,3vw,30px);align-items:flex-start;max-width:980px;padding:22px var(--gutter) 0}
.intro h1{font-size:clamp(1.9rem,4.4vw,2.9rem);transform:rotate(-.6deg)}
.intro p{margin:.5em 0 0}

.canopy{position:relative;max-width:1560px;margin:18px auto 0}
.stamp{animation:stamp .5s cubic-bezier(.2,1.4,.4,1) 0s backwards;transform-box:fill-box;transform-origin:center}
@keyframes stamp{from{transform:scale(1.8);opacity:0}}
.legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 16px;margin:0;padding:0 var(--gutter);font:400 1.05rem var(--hand);justify-content:flex-end}
.legend li{display:flex;align-items:center;gap:6px}

.plain{max-width:980px;margin:28px auto 0;padding:0 var(--gutter)}
.plain>h2{font-size:1.6rem;transform:rotate(-.5deg)}
.branches,.rows{list-style:none;margin:0;padding:0}
.branches .branches,.branch-item>.rows{margin-left:clamp(10px,2.4vw,24px);border-left:1.5px solid var(--ink);padding-left:clamp(10px,2vw,18px)}
.branch-item{margin-top:14px}
.branch-item h3{font-size:1.45rem;color:var(--red)}
.branch-item h4{font-size:1.25rem}
.branch-item h5{font-size:1.1rem}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:2px 10px;padding:3px 0}
.row a{display:flex;align-items:center;gap:8px;text-decoration:none}
.row a:hover .name{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.tags{display:inline-flex;gap:5px}
.tag{font:400 .92rem/1.2 var(--hand);border:1.2px solid var(--ink);border-radius:9px 7px 10px 6px;padding:0 7px;transform:rotate(-1deg);display:inline-block}
.tag-sub{border-color:var(--red);color:var(--red)}
.est{font-size:.9rem;color:var(--soft);margin-left:auto}

.sheet{max-width:760px;margin:auto;padding:22px var(--gutter) 10px}
.sheet h1{font-size:clamp(2.2rem,6vw,3.3rem);margin:.15em 0 .1em;transform:rotate(-.5deg)}
.sheet section{margin-top:32px}
.sheet h2{font-size:1.5rem;color:var(--red);margin-bottom:6px}
.crumb,.small{font-size:.95rem;color:var(--soft);margin:0}
.logo{width:min(360px,100%);height:auto;margin:14px 0 4px;border-radius:3px;transform:rotate(-.7deg);box-shadow:3px 4px 0 var(--line)}
.tagrow{margin:6px 0 0;display:flex;gap:6px;min-height:0}
.lede{font-size:1.25rem;line-height:1.45;margin:.7em 0 0}
.status{display:flex;gap:12px;align-items:flex-start;margin-top:18px;padding:12px 14px;background:var(--paper-2);border-radius:4px 10px 5px 12px;transform:rotate(.25deg)}
.status strong{font-family:var(--hand);font-size:1.2rem}
.status p{margin:2px 0 0;font-size:1.02rem}
.seal{flex:none}
.actions{display:flex;flex-wrap:wrap;gap:10px;margin:16px 0 0}
.btn{font:700 1.08rem var(--hand);padding:5px 14px;border:1.8px solid var(--ink);border-radius:12px 9px 13px 8px;text-decoration:none;transform:rotate(-.6deg)}
.btn:hover{background:var(--ink);color:var(--paper)}
.figures{list-style:none;padding:0;margin:0}
.figures li{padding:2px 0}
.figures b{font-family:var(--hand);font-size:1.25rem}
.tried{list-style:none;margin:0;padding:0}
.tried li{display:flex;gap:12px;padding:6px 0}
.mark{font:700 1.7rem/1.1 var(--hand);width:1.1em;flex:none;text-align:center}
.ch-worked .mark{color:#217a4c}
.ch-failed .mark{color:var(--red)}
.ch-partly .mark{color:#8a6a06}
.tried h3{font-size:1.18rem}
.tried p{margin:0}
dl{display:grid;grid-template-columns:minmax(80px,max-content) 1fr;gap:4px 14px;margin:0;font-size:1.02rem}
dt{font-family:var(--hand);font-weight:700}
dd{margin:0}
figure{margin:0}
figcaption{font-size:.92rem;color:var(--soft);margin-top:6px}
.next{margin-top:32px;font-family:var(--hand);font-size:1.15rem}
.hold{font:700 1rem var(--hand);color:var(--red);border:1.5px dashed var(--red);padding:5px 10px}
.scale{list-style:none;padding:0;margin:20px 0 0}
.scale li{display:flex;gap:12px;align-items:center;padding:8px 0}
.scale p{margin:0}
.scale strong{font-family:var(--hand);font-size:1.15rem}
.terms{list-style:none;padding:0;margin:20px 0 0;font-size:1rem}
.terms li{padding:3px 0}
.terms b{font-family:var(--hand);font-size:1.12rem}

.foot{max-width:980px;margin:40px auto 0;padding:0 var(--gutter) 28px;color:var(--soft);font-size:.95rem}
.foot p{margin:4px 0 0}

@media (max-width:760px){
}
.signed{display:flex;align-items:center;gap:12px}
.seal-big{width:clamp(70px,11vw,120px);height:auto;transform:rotate(-7deg);flex:none}
.sig-big{width:190px;height:auto;margin-top:8px}
.start{display:inline;font-family:var(--hand);font-weight:700;margin:0}
.starts{display:inline;list-style:none;margin:0;padding:0;font-family:var(--hand);font-size:1.1rem}
.starts li{display:inline}
.starts li+li::before{content:"  →  ";color:var(--red)}
.contact{margin:.5em 0 0;font-size:1rem}
.bad{fill:var(--red);font-weight:700}
.bud{fill:var(--ink)}
.tag-topic{border-style:dashed}
.gap{background:var(--paper-2);padding:10px 14px;border-radius:5px 12px 6px 10px;margin-top:22px!important}
.sheet ul{padding-left:1.1em}
.sheet li{margin-bottom:4px}
.try{list-style:none;display:flex;gap:10px;margin-left:-1.1em}
.try .mark{font:700 1.45rem/1.1 var(--hand);width:1em;flex:none;text-align:center}
.try-worked .mark{color:#217a4c}
.try-failed .mark{color:var(--red)}
.try-partly .mark{color:#8a6a06}
table{border-collapse:collapse;font-size:.98rem;width:100%}
th,td{text-align:left;padding:5px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{font-family:var(--hand)}
code{font-size:.9em}
.connected{list-style:none;padding:0!important;display:flex;flex-wrap:wrap;gap:6px 16px;font-family:var(--hand);font-size:1.12rem}
.art-head{max-width:760px}
.sheet.article{max-width:1180px}
.art-grid{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:clamp(24px,4vw,56px);align-items:start;margin-top:16px}
.art-body{min-width:0;max-width:72ch}
.art-body section{margin-top:30px}
.art-body section.first{margin-top:6px}
.art-body section.first>p:first-of-type{font-size:1.2rem;line-height:1.5}
.art-body section.first>p:first-of-type::first-letter{font:700 3.4rem/.8 var(--hand);float:left;padding:.08em .1em 0 0;color:var(--red)}
.art-body h2{font-size:1.65rem;color:var(--red);margin-bottom:6px}
.art-body h3{font-size:1.25rem;margin-top:14px}
.art-side{position:sticky;top:14px;display:flex;flex-direction:column;gap:14px;font-size:1rem}
.art-side .status{margin:0}
.art-side h2{font-size:1.15rem;margin:0 0 4px}
.art-side .actions{margin:0}
.toc ol{list-style:none;margin:0;padding:0;font-family:var(--hand);font-size:1.02rem;line-height:1.35}
.toc li{padding:2px 0}
.toc a{text-decoration:none}
.toc a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}
.tagline{font:400 1.35rem/1.25 var(--hand);margin:.15em 0 .5em!important;color:var(--red)}
.art-side .logo{width:100%;margin:0;transform:rotate(-.7deg)}
.media{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin:18px 0}
.sheet.article{max-width:880px}
.art-head{max-width:none;display:flex;gap:24px;align-items:center;justify-content:space-between}
.art-title{min-width:0;flex:1}
.art-head .logo{width:min(250px,32%);margin:0;flex:none}
.art-body{max-width:none;margin-top:8px}
.toc{margin-top:14px}
.toc ol{display:flex;flex-wrap:wrap;gap:2px 18px}
.toc li+li::before{content:"· ";color:var(--red)}
@media (max-width:640px){.art-head{flex-direction:column-reverse;align-items:flex-start}.art-head .logo{width:min(240px,70%)}}

:root{--night:0}
html[data-mode=night]{--night:1;--paper:#15130f;--paper-2:#211d17;--ink:#ece4d3;--soft:#b4aa98;--line:#3f382e;--red:#e8625a;--blue:#9fb2ff}
@media (prefers-color-scheme:dark){html:not([data-mode=paper]){--night:1;--paper:#15130f;--paper-2:#211d17;--ink:#ece4d3;--soft:#b4aa98;--line:#3f382e;--red:#e8625a;--blue:#9fb2ff}}
body{transition:background-color .3s,color .3s}
.mode{background:none;border:0;color:inherit;font:400 1.15rem var(--hand);cursor:pointer;padding:0 2px}
.mode:hover{color:var(--red)}

/* ===== counter-audit layer ===== */
:root{--blend:multiply}
html[data-mode=night]{--blend:normal}
@media (prefers-color-scheme:dark){html:not([data-mode=paper]){--blend:normal}}

/* handwriting: titles and notes. Printed type: everything small or functional */
h3,h4,h5,.top nav,.tag,.btn,.legend,.toc,.next,.connected,th,dt,.terms b,.scale strong,.mode{font-family:var(--read)}
h3,h4,h5{font-weight:650}
.sheet h1,.intro h1{transform:none;font-weight:400;letter-spacing:-.005em}
.sheet h2,.art-body h2{font-weight:400;font-size:1.75rem}
.art-body h3{font-size:1.2rem}
.plain>h2{transform:none}
.top nav{font-size:1rem}
.tag{font-size:.82rem;border:0;border-radius:0;padding:0;transform:none;color:var(--soft)}
.tag-sub{color:var(--red)}
.tags{gap:10px}
.btn{font-weight:600;font-size:1rem;border-radius:3px;border-width:1.5px;transform:none}
.logo{transform:none;box-shadow:none;outline:1px solid var(--line)}
.next{font-size:1rem;color:var(--soft)}
.connected{font-size:1rem}

/* tree */

/* first screen */
.intro{max-width:none}
.intro>div{max-width:740px}
.seal-big{width:clamp(56px,7vw,92px)}
html[data-mode=night] .seal-big{filter:brightness(1.75)}
@media (prefers-color-scheme:dark){html:not([data-mode=paper]) .seal-big{filter:brightness(1.75)}}
.legend{flex-direction:column;flex-wrap:nowrap;gap:2px;padding:0;margin-left:auto;font-size:.92rem;justify-content:flex-start;max-width:none;color:var(--soft)}
.legend b{color:var(--ink)}
.worlds{display:flex;flex-wrap:wrap;gap:0 22px;padding:10px var(--gutter) 0;font:400 1.3rem var(--hand);color:var(--red)}
.worlds a{text-decoration:none}
.worlds a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.2em}

/* list */
.row{display:grid;grid-template-columns:minmax(0,1fr) auto 10.5rem;gap:0 14px;padding:3px 0}
.est{margin:0;text-align:right;font-variant-numeric:tabular-nums}
.grp>summary{cursor:pointer;list-style:none}
.grp>summary::-webkit-details-marker{display:none}
.grp>summary h3,.grp>summary h4,.grp>summary h5{display:inline}
.n{font-size:.85rem;color:var(--soft)}

/* title block: a printed form, filled in by hand */
.block{display:flex;flex-wrap:wrap;border:1.5px solid var(--ink);margin:18px 0 0;gap:0;font-size:1rem}
.block>div{flex:1 1 auto;padding:3px 12px 6px;border-left:1px solid var(--ink)}
.block>div:first-child{border-left:0;flex-grow:2}
.block dt{font:500 .75rem/1.4 var(--read);letter-spacing:.07em;text-transform:uppercase;color:var(--soft)}
.block dd{margin:0;font:400 1.3rem/1.25 var(--hand);display:flex;align-items:center;gap:8px;white-space:nowrap}
.note{margin:10px 0 0;font-size:1.02rem;color:var(--soft);max-width:36rem}

/* contents */
.toc{margin-top:14px;font-size:1rem}
.toc summary{cursor:pointer;color:var(--soft)}
.toc ol{display:block;list-style:decimal;padding-left:1.4em;margin:6px 0 0;font-family:var(--read)}
.toc li+li::before{content:none}

/* reading column: 63 to 72 characters measured */
.art-body>section>:is(p,ul,ol,h2,h3){max-width:36rem}
.art-body>section{display:flow-root}

/* media */
.art-body figure{margin:26px 0}
.art-body figure img{width:auto;max-width:100%;height:auto;max-height:78vh;margin:0 auto}
.art-body figure.side{float:right;width:300px;margin:6px 0 16px 28px}
.art-body figure.pair{display:inline-block;width:calc(50% - 8px);vertical-align:top}
.art-body figure.pair+figure.pair{margin-left:12px}
.art-body figure.wide{width:min(1180px,calc(100vw - 2*var(--gutter)));margin-left:50%;transform:translateX(-50%)}
.art-body figure.wide img{width:100%;max-height:none}
figure.pale img{mix-blend-mode:var(--blend)}
figcaption{font:400 1.08rem/1.3 var(--hand);color:var(--soft);margin-top:6px}
.zoom{display:block;cursor:zoom-in}
.yt{position:relative;display:block;width:100%;aspect-ratio:16/9;padding:0;border:0;background:var(--paper-2);cursor:pointer}
.art-body figure .yt img{width:100%;height:100%;max-height:none;object-fit:cover}
.play{position:absolute;inset:0;margin:auto;width:0;height:0;border-left:44px solid var(--paper);border-top:26px solid transparent;border-bottom:26px solid transparent;filter:drop-shadow(0 0 6px #000a)}
.art-body iframe{width:100%;aspect-ratio:16/9;border:0;display:block}
.box{border:0;padding:0;background:none;max-width:96vw;max-height:96vh}
.box::backdrop{background:#000c}
.box img{max-width:96vw;max-height:96vh;width:auto;height:auto}

/* below 1300: type tags stay readable, legend shrinks to one line */
@media (max-width:1299px){
  .intro{flex-wrap:wrap}
  .intro>div{flex:1 1 0;min-width:280px}
  .legend{flex-direction:row;flex-wrap:wrap;gap:2px 16px;margin-left:0;max-width:none;flex-basis:100%}
  .legend .m{display:none}
}
/* below 1000: the tree is a picture, the list under it is the tree you tap */
@media (max-width:999px){
  .home main{display:flex;flex-direction:column}
  .intro{order:1}.canopy{order:2}.worlds{order:3}.plain{order:4}
  .canopy{max-width:520px;width:100%;margin:6px auto 0}
  .plain{width:100%}
  .worlds{flex-direction:column;gap:0;margin-top:8px;font-size:1.2rem}
  .worlds a{min-height:44px;display:flex;align-items:center;border-bottom:1px solid var(--line)}
}
@media (max-width:760px){
  .top{position:relative}
  .brand{line-height:44px}
  .top nav{width:100%;justify-content:space-between;gap:0;font-size:.98rem}
  .top nav a{padding:10px 0}
  .mode{position:absolute;right:calc(var(--gutter) - 8px);top:8px;width:44px;height:44px;font-size:1.3rem}
  .intro{display:block;padding-top:8px}
  .legend{margin-top:8px}
  .seal-big{float:right;width:56px;margin:0 0 4px 12px}
  .row{grid-template-columns:auto 1fr;padding:0}
  .row a{grid-column:1/-1;padding:8px 0}
  .row .tags{padding-left:30px;font-size:.8rem}
  .row .tags:empty{display:none}
  .est{padding-left:10px;text-align:left;font-size:.82rem}
  .grp>summary{min-height:44px;display:flex;align-items:center;gap:8px}
  .art-head{flex-direction:row;align-items:flex-start;gap:12px}
  .art-head .logo{width:84px;margin-top:6px}
  .crumb{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .sheet h1{font-size:clamp(2rem,9vw,2.6rem)}
  .lede{font-size:1.12rem}
  .block>div{padding:2px 8px 4px}
  .block dd{font-size:1.1rem}
  .art-body figure.side,.art-body figure.pair{float:none;display:block;width:100%;margin:20px 0}
  .art-body figure.pair+figure.pair{margin-left:0}
}

/* numbered steps as position balloons from a construction drawing */
.steps{list-style:none;padding:0;margin:14px 0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding-left:2.3em;margin-bottom:8px}
.steps li::before{content:counter(s);position:absolute;left:0;top:.15em;width:1.6em;height:1.6em;border:1.3px solid var(--ink);border-radius:50%;font:500 .85rem/1.6em var(--read);text-align:center}
.yt .play{position:absolute;inset:0;display:grid;place-items:center;background:none;border:0;box-shadow:none;width:auto;height:auto;border-radius:0;transform:none;margin:0}
.yt .play svg{width:68px;height:48px;filter:none;opacity:.92}
.yt:hover .play svg{opacity:1}
.yt{position:relative;background:#000;border:0;padding:0;display:block;width:100%;cursor:pointer}
@media (min-width:761px){
  .row{grid-template-columns:minmax(0,1fr) 4.2rem 4.2rem 10.5rem}
  .row .tags{display:contents}
  .row .tag{grid-column:2;text-align:left}
  .row .tag-sub{grid-column:3}
  .row .est{grid-column:4}
}
/* one column: pictures exactly as wide as the text */
.sheet.article{max-width:calc(39rem + 2*var(--gutter))}
.art-body>section>:is(p,ul,ol,h2,h3){max-width:none}
.note{max-width:none}
.art-body figure,.art-body figure.full,.art-body figure.wide,.art-body figure.side,.art-body figure.pair{float:none;display:block;width:100%;margin:24px 0 26px;transform:none}
.art-body figure.pair+figure.pair{margin-left:0}
.art-body figure img,.art-body figure.wide img{display:block;width:100%;height:auto;max-height:none;margin:0;border-radius:6px}
.art-body figure .yt,.art-body figure iframe{border-radius:6px;overflow:hidden}
.art-body figure.pale img{border-radius:0}
.art-body figcaption{margin-top:8px;text-align:left}
.art-head{display:block}
.art-head .logo{display:block;width:100%;height:auto;aspect-ratio:16/9;margin:12px 0 18px;border-radius:6px;transform:none;box-shadow:none}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
a:hover{color:inherit;opacity:.72}
.legend li{white-space:nowrap}
@media (max-width:700px){.legend li{white-space:normal}}

/* ===== package A: reading, list, motion ===== */
:root{--brush-1:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 20' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 8.6L14 5.6L28 3.6L42 3.7L56 3.1L70 2.9L83 4.1L97 3.6L111 4.1L125 3.8L139 4.1L153 3.6L167 3.5L181 3.9L195 3.4L209 3.8L223 3.8L237 4.2L250 4.5L264 4.3L278 4.7L292 4.4L306 4.2L320 4.6L334 4.3L348 4.1L362 3.7L376 3.9L390 3.9L403 4.9L417 5.0L431 5.1L445 5.6L459 5.9L473 5.9L487 6.5L501 6.5L515 6.8L529 6.8L543 7.3L557 7.7L570 8.1L584 8.4L598 9.0L612 9.3L626 9.7L640 10.2L640 11.2L626 11.4L612 11.5L598 11.8L584 11.9L570 12.1L557 12.5L543 12.8L529 12.9L515 12.5L501 13.0L487 12.6L473 12.7L459 12.6L445 12.7L431 13.3L417 13.6L403 13.2L390 13.4L376 13.5L362 12.9L348 13.4L334 12.7L320 12.4L306 12.5L292 12.8L278 12.7L264 12.3L250 12.8L237 13.0L223 13.4L209 13.2L195 13.1L181 13.2L167 12.9L153 12.6L139 12.8L125 13.5L111 13.6L97 13.6L83 13.9L70 14.8L56 14.2L42 14.7L28 14.6L14 12.8L0 9.9ZM378 9.2L442 9.5L378 10.2ZM393 8.3L429 8.6L393 9.1ZM304 9.7L340 10.0L304 10.3ZM488 10.3L544 10.6L488 10.8ZM477 11.2L527 11.5L477 12.0ZM506 10.1L538 10.4L506 11.1Z'/%3E%3C/svg%3E");--brush-2:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 20' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 9.2L14 7.3L28 6.2L42 5.9L56 5.4L70 5.2L83 5.8L97 5.6L111 5.4L125 5.5L139 4.9L153 4.4L167 4.8L181 4.6L195 4.3L209 3.5L223 4.4L237 4.0L250 3.8L264 4.1L278 4.8L292 4.9L306 4.6L320 4.5L334 4.8L348 5.0L362 5.0L376 5.1L390 5.1L403 5.4L417 5.9L431 6.1L445 6.5L459 6.7L473 6.6L487 6.7L501 7.1L515 7.2L529 7.2L543 7.4L557 7.7L570 7.6L584 8.2L598 8.3L612 8.7L626 9.1L640 9.5L640 10.7L626 10.9L612 11.0L598 11.2L584 11.1L570 11.5L557 11.5L543 11.2L529 11.5L515 11.3L501 11.1L487 11.1L473 10.9L459 11.1L445 11.2L431 11.2L417 11.6L403 11.4L390 11.7L376 11.9L362 12.0L348 12.3L334 12.3L320 12.2L306 12.3L292 11.8L278 12.0L264 12.5L250 12.4L237 13.2L223 13.4L209 13.0L195 13.0L181 12.7L167 13.0L153 13.1L139 12.9L125 12.8L111 12.9L97 13.0L83 13.0L70 13.4L56 13.0L42 13.5L28 12.8L14 12.1L0 10.4ZM528 8.2L592 8.5L528 8.9ZM431 8.4L465 8.7L431 8.9ZM524 11.2L613 11.5L524 12.2ZM408 8.4L454 8.7L408 9.1ZM362 8.2L420 8.5L362 9.3ZM421 8.9L461 9.2L421 9.8ZM407 10.2L489 10.5L407 10.8ZM475 9.4L530 9.7L475 10.0ZM305 10.3L362 10.6L305 11.3Z'/%3E%3C/svg%3E");--brush-3:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 20' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 9.6L14 6.3L28 5.4L42 4.7L56 4.5L70 5.0L83 5.3L97 5.7L111 6.1L125 6.0L139 6.3L153 5.9L167 6.0L181 5.5L195 5.2L209 5.7L223 5.2L237 6.0L250 5.9L264 6.3L278 6.5L292 6.4L306 6.2L320 5.4L334 5.3L348 5.8L362 5.3L376 5.9L390 5.7L403 6.2L417 6.3L431 6.6L445 6.8L459 7.6L473 7.6L487 7.4L501 7.9L515 7.3L529 7.6L543 8.0L557 7.7L570 7.9L584 8.4L598 8.5L612 8.7L626 9.0L640 9.2L640 10.3L626 10.9L612 11.2L598 11.5L584 12.0L570 12.7L557 13.1L543 13.2L529 13.7L515 13.7L501 14.2L487 14.4L473 14.7L459 15.1L445 15.5L431 15.7L417 15.7L403 17.0L390 16.9L376 17.0L362 17.5L348 17.4L334 17.4L320 17.5L306 16.9L292 16.6L278 16.8L264 17.6L250 17.2L237 17.9L223 17.3L209 17.3L195 17.8L181 17.0L167 17.2L153 16.8L139 16.5L125 16.4L111 15.7L97 16.0L83 16.1L70 16.1L56 16.3L42 17.0L28 15.5L14 13.9L0 10.9ZM398 11.5L443 11.8L398 12.3ZM427 9.4L476 9.7L427 10.2ZM316 10.4L386 10.7L316 11.5ZM370 10.5L404 10.8L370 11.3Z'/%3E%3C/svg%3E");--brush-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 420 16' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 6.3L9 3.8L18 2.1L27 0.9L37 0.9L46 0.3L55 0.1L64 0.7L73 0.6L82 1.3L91 0.6L100 1.7L110 1.0L119 1.4L128 1.0L137 1.7L146 1.5L155 1.4L164 2.0L173 1.7L183 2.7L192 2.9L201 2.8L210 3.6L219 3.5L228 3.3L237 3.5L247 3.4L256 3.9L265 3.5L274 3.6L283 3.9L292 4.0L301 4.9L310 4.8L320 4.8L329 5.1L338 5.6L347 5.7L356 5.7L365 6.1L374 6.5L383 6.7L393 6.9L402 7.4L411 7.9L420 8.5L420 9.8L411 10.1L402 10.5L393 10.7L383 10.8L374 10.9L365 11.1L356 11.3L347 11.1L338 11.3L329 11.2L320 11.3L310 11.4L301 11.3L292 11.0L283 11.4L274 11.5L265 11.2L256 11.2L247 10.9L237 11.1L228 10.6L219 10.7L210 10.5L201 10.9L192 10.9L183 11.1L173 11.1L164 11.2L155 11.9L146 11.9L137 12.1L128 11.3L119 11.3L110 12.0L100 11.5L91 11.2L82 12.3L73 12.0L64 12.0L55 11.7L46 12.2L37 12.1L27 12.6L18 11.2L9 9.8L0 7.3ZM346 7.4L429 7.7L346 8.0ZM203 6.1L278 6.4L203 6.9ZM333 8.9L374 9.2L333 10.0ZM219 9.6L266 9.9L219 10.4ZM277 9.8L357 10.1L277 10.3ZM299 8.7L369 9.0L299 9.7ZM203 8.3L260 8.6L203 9.4Z'/%3E%3C/svg%3E");--brush-l:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 8' preserveAspectRatio='none'%3E%3Cpath fill-rule='evenodd' d='M0 4.7L17 3.8L35 3.4L52 2.9L70 3.0L87 2.8L104 2.6L122 2.5L139 2.2L157 2.2L174 2.4L191 2.2L209 2.2L226 2.3L243 2.3L261 2.1L278 2.2L296 1.9L313 1.6L330 1.6L348 1.5L365 1.2L383 1.4L400 1.1L417 1.2L435 1.1L452 1.0L470 1.1L487 1.0L504 1.0L522 0.9L539 1.0L557 0.9L574 0.8L591 1.0L609 0.9L626 1.1L643 1.3L661 1.3L678 1.6L696 1.6L713 1.7L730 1.8L748 2.0L765 2.1L783 2.2L800 2.5L800 3.2L783 3.3L765 3.3L748 3.4L730 3.3L713 3.4L696 3.3L678 3.4L661 3.5L643 3.6L626 3.7L609 3.7L591 3.9L574 3.9L557 4.0L539 3.9L522 4.2L504 4.0L487 4.2L470 4.3L452 4.4L435 4.4L417 4.6L400 4.5L383 4.6L365 4.6L348 4.9L330 4.8L313 4.8L296 5.1L278 4.9L261 5.0L243 5.2L226 5.4L209 5.4L191 5.6L174 5.9L157 6.1L139 6.4L122 6.4L104 6.5L87 6.5L70 6.8L52 6.9L35 6.5L17 6.3L0 5.6ZM487 6.0L525 6.3L487 6.9ZM712 3.3L755 3.6L712 3.9ZM365 5.6L438 5.9L365 6.2ZM625 2.6L661 2.9L625 3.7ZM587 2.7L626 3.0L587 3.8ZM618 4.2L689 4.5L618 5.0ZM526 1.8L606 2.1L526 2.8ZM481 6.1L563 6.4L481 6.9Z'/%3E%3C/svg%3E")}
:root{--t-touch:120ms;--t-change:250ms;--t-page:420ms;--ease-ink:cubic-bezier(.2,.8,.2,1);
  --spring:linear(0,.35 8%,.82 18%,1.06 28%,1.1 34%,1.03 46%,.99 58%,1 72%,1);
  --sketch:255px 15px 225px 15px/15px 225px 15px 255px;
  --hook:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 20'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 17C14 18.500 7.500 14 6 4.500'/%3E%3Cpath d='M2 9.500 5.700 3.500 11 8'/%3E%3C/g%3E%3C/svg%3E")}
html:not(.js) .mode{display:none}
::selection{background:color-mix(in srgb,var(--ink) 17%,transparent)}
h1,h2,h3{text-wrap:balance}
.art-body p,.art-body li,.note,.lede{text-wrap:pretty}
code{overflow-wrap:anywhere;font-size:.86em;background:color-mix(in srgb,var(--ink) 7%,transparent);padding:.05em .28em;border-radius:3px 4px 3px 5px}
.sheet{overflow-wrap:break-word}

/* links in running text: a straight line that gets stronger, no colour */
.sheet a{transition:text-decoration-thickness var(--t-touch)}
.sheet p a:hover,.sheet li a:hover,.sheet td a:hover{opacity:1;text-decoration-thickness:2.5px}
.top a{transition:opacity var(--t-touch)}

/* the title: one stroke under it, drawn once */
.sheet h1:not(.vh)::after{content:"";display:block;width:min(100%,17rem);height:12px;margin-top:8px;background:var(--red);mask:var(--brush-t) 0 0/100% 100% no-repeat;transform:rotate(-.5deg)}
.block{border-radius:var(--sketch);border-width:1.6px;padding:2px 4px}
.block>div{border-left:0;position:relative}
.block>div+div::before{content:"";position:absolute;left:0;top:14%;bottom:12%;width:1.4px;background:var(--ink);opacity:.55;transform:rotate(1.5deg)}
.block>div:first-child{border-left:0}
.logo{outline:0;border-radius:7px 5px 8px 6px!important}

/* sections: each break is a brush stroke, no two neighbours alike */
.art-body>section+section{position:relative;margin-top:46px;padding-top:30px}
.art-body>section+section::before{content:"";position:absolute;top:0;left:0;width:min(62%,23rem);height:13px;background:var(--ink);opacity:.82;mask:var(--brush-1) 0 0/100% 100% no-repeat}
.art-body>section:nth-of-type(3n)::before{width:min(44%,16rem);mask-image:var(--brush-2);left:auto;right:0;transform:scaleX(-1)}
.art-body>section:nth-of-type(3n+1)::before{width:min(78%,29rem);mask-image:var(--brush-3);height:15px}
.art-body section{scroll-margin-top:30px}
.art-body h2{text-wrap:balance}

/* lists of attempts: brush marks instead of font glyphs */
.try{gap:12px;align-items:flex-start;margin-bottom:9px}
.try .mark{width:auto;margin-top:.22em;line-height:0}
.try .mark svg{fill:currentColor}
html[data-mode=night] .try-worked .mark{color:#55c48b}
html[data-mode=night] .try-partly .mark{color:#e0ab17}
@media (prefers-color-scheme:dark){html:not([data-mode=paper]) .try-worked .mark{color:#55c48b}html:not([data-mode=paper]) .try-partly .mark{color:#e0ab17}}

/* pictures: exactly as wide as the text, soft uneven corners, the colour of the picture until it is there */
.zoom,.yt{display:block;overflow:hidden;border-radius:7px 5px 8px 6px;background:var(--tone,var(--paper-2))}
.pale .zoom{background:none;overflow:visible}
.art-body figure img,.art-body figure.wide img{border-radius:0}
.art-body figure .yt,.art-body figure iframe,.art-body figure video{border-radius:7px 5px 8px 6px}
.art-body video{display:block;width:100%;height:auto}
.zoom:hover,.yt:hover{opacity:1}
.zoom img{transition:scale var(--t-page) var(--ease-ink),rotate var(--t-page) var(--ease-ink)}
.zoom:hover img{scale:1.018;rotate:-.25deg}
.pale .zoom:hover img{scale:1;rotate:none}
.yt.clip{aspect-ratio:auto}
.art-body figure .yt.clip img{height:auto}
.yt .play svg{transition:scale var(--t-change) var(--spring)}
.yt:hover .play svg,.yt:focus-visible .play svg{scale:1.14}
.yt img{transition:filter var(--t-change)}
.yt:hover img{filter:brightness(.82)}
html.js .art-body figure img{opacity:0;filter:blur(4px);transition:opacity var(--t-change) ease-out,filter var(--t-page) ease-out,scale var(--t-page) var(--ease-ink),rotate var(--t-page) var(--ease-ink)}
html.js .art-body figure img.on{opacity:1;filter:none}
html.js .yt:hover img.on{filter:brightness(.82)}
.art-body figcaption{padding-left:2px}
.art-body figcaption::before{content:"";display:inline-block;width:25px;height:19px;margin-right:7px;vertical-align:-1px;background:currentColor;opacity:.75;mask:var(--hook) center/contain no-repeat}

/* tables: strokes top and bottom, hairlines inside, figures line up */
div.wide{position:relative;margin:22px 0;padding:7px 0}
div.wide::before,div.wide::after{content:"";position:absolute;left:0;right:0;top:0;height:6px;background:var(--ink);mask:var(--brush-l) 0 0/100% 100% no-repeat}
div.wide::after{top:auto;bottom:0;transform:scaleX(-1)}
table{font-variant-numeric:tabular-nums}
th{border-bottom-color:var(--ink)}
tr:last-child td{border-bottom:0}
.num{text-align:right}

/* buttons: a piece of card, pressed down when used */
.btn{border-radius:var(--sketch);background:var(--paper);box-shadow:2px 3px 0 var(--ink);transition:translate var(--t-touch) var(--ease-ink),box-shadow var(--t-touch) var(--ease-ink)}
.btn:hover{background:var(--paper);color:var(--ink);opacity:1;translate:-1px -1px;box-shadow:3px 4px 0 var(--ink)}
.btn:active{translate:2px 3px;box-shadow:0 0 0 var(--ink)}
.toc{margin-bottom:26px}
.toc summary{width:fit-content;list-style:none;display:flex;align-items:baseline;gap:8px}
.toc summary::-webkit-details-marker{display:none}
.toc summary::before{content:"";flex:none;width:.5em;height:.5em;border:solid currentColor;border-width:0 1.6px 1.6px 0;border-radius:0 1px 2px 1px;rotate:-45deg;translate:0 -.05em;transition:rotate var(--t-change) var(--ease-ink)}
.toc[open] summary::before{rotate:45deg;translate:0 -.18em}
.toc summary:hover{color:var(--ink)}
.next{position:relative;margin-top:44px;padding-top:26px}
.next::before{content:"";position:absolute;left:0;top:0;width:min(46%,18rem);height:12px;background:var(--ink);opacity:.82;mask:var(--brush-2) 0 0/100% 100% no-repeat}
.next a{font:400 1.32rem var(--hand);color:var(--ink);text-decoration-thickness:1px}
.foot{position:relative;padding-top:18px}
.foot::before{content:"";position:absolute;left:var(--gutter);top:0;width:9rem;height:9px;background:var(--soft);opacity:.7;mask:var(--brush-3) 0 0/100% 100% no-repeat}

/* lightbox */
.box{margin:auto;overflow:visible;opacity:1;scale:1;cursor:zoom-out;transition:opacity var(--t-change) ease-out,scale var(--t-change) var(--ease-ink),overlay var(--t-change) allow-discrete,display var(--t-change) allow-discrete}
.box:not([open]){opacity:0;scale:.97}
@starting-style{.box[open]{opacity:0;scale:.97}}
.box img{border-radius:7px 5px 8px 6px;box-shadow:0 10px 40px #0005}
.box::backdrop{background:color-mix(in srgb,var(--paper) 90%,#000);opacity:1;transition:opacity var(--t-change) ease-out,overlay var(--t-change) allow-discrete,display var(--t-change) allow-discrete}
.box:not([open])::backdrop{opacity:0}
@starting-style{.box[open]::backdrop{opacity:0}}

/* the list on the home page */
@media (min-width:761px){
  .row{grid-template-columns:minmax(0,1fr) 6.4rem 4.2rem 10.5rem}
}
.tag{white-space:nowrap}
.row a:hover{opacity:1}
.row .seal{transition:rotate var(--t-change) var(--spring),scale var(--t-change) var(--spring)}
.row a:hover .seal{rotate:-10deg;scale:1.14}
.branch-item{scroll-margin-top:14px}
.grp>summary{display:flex;align-items:baseline;gap:8px;width:fit-content}
.grp>summary::before{content:"";flex:none;width:.55em;height:.55em;border:solid currentColor;border-width:0 2px 2px 0;border-radius:0 1px 2px 1px;rotate:-45deg;translate:0 -.08em;transition:rotate var(--t-change) var(--ease-ink)}
.grp[open]>summary::before{rotate:45deg;translate:0 -.2em}
@keyframes spot{from{background-color:color-mix(in srgb,var(--ink) 16%,transparent)}}
.branch-item:target{animation:spot 1.5s ease-out;border-radius:6px 9px 7px 10px}
.legend .seal{flex:none}
@media (min-width:700px) and (max-width:1299px){
  .legend{display:grid;grid-template-columns:max-content;gap:2px 30px}
  .legend .m{display:inline}
}
@media (min-width:900px) and (max-width:1299px){.legend{grid-template-columns:repeat(2,max-content)}}
@media (max-width:699px){
  .legend{flex-wrap:nowrap;justify-content:space-between;gap:6px}
  .legend li{white-space:nowrap;gap:4px;font-size:.88rem}
  .legend .seal{width:17px;height:17px}
}

/* phones: fixed columns on the row's second line */
@media (max-width:760px){
  .branches .branches,.branch-item>.rows,.grp>.rows{margin-left:4px;padding-left:10px}
  .row{grid-template-columns:6.6rem 3.6rem minmax(0,1fr);gap:0 6px;padding:0 0 5px}
  .row a{grid-column:1/-1;padding:7px 0 1px}
  .row .tags{display:contents}
  .row .tag{grid-column:1;padding-left:30px}
  .row .tag-sub{grid-column:2;padding-left:0}
  .row .est{grid-column:3;padding-left:0;text-align:right;white-space:nowrap}
  .row .est{font-size:.8rem}
  .block{border-radius:18px 10px 20px 9px/12px 22px 11px 20px}
  .block dd{white-space:normal}

  /* tables become small cards, no sideways scroller */
  .wide table,.wide tbody,.wide tr,.wide td{display:block}
  .wide thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  .wide tr{padding:9px 0;border-bottom:1px solid var(--line)}
  .wide tr:last-child{border-bottom:0}
  .wide td{display:grid;grid-template-columns:minmax(0,34%) minmax(0,1fr);gap:0 12px;padding:1px 0;border:0;text-align:left}
  .wide td::before{content:attr(data-label);font-size:.82rem;line-height:1.75;color:var(--soft)}
  .wide td:first-child{display:block;font-weight:600}
  .wide td:first-child::before{content:none}
}

/* paper: uneven tone towards the edges, as on a handmade sheet */
body{background-attachment:scroll}
body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(60vmax 34vmax at 6% -6%,color-mix(in srgb,var(--paper-2) 85%,var(--soft)),transparent 72%),
  radial-gradient(46vmax 40vmax at 104% 34%,var(--paper-2),transparent 70%),
  radial-gradient(52vmax 30vmax at -6% 88%,var(--paper-2),transparent 72%),
  radial-gradient(70vmax 26vmax at 70% 112%,color-mix(in srgb,var(--paper-2) 80%,var(--soft)),transparent 70%)}
html{background:var(--paper)}
body{background-color:transparent;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto;min-width:0;width:100%}
.home main{overflow-x:clip}
.foot{width:100%}
.top{width:100%}

/* the sprig: a twig of the tree reaches into the page, in the margin only, and scrolls away with the top */
.sprig{display:none}
@media (min-width:1180px){
  .sprig{display:block;position:absolute;top:58px;right:0;width:clamp(270px,23vw,400px);height:auto;pointer-events:none;overflow:visible;max-width:none}
}
.sprig-wood{fill:var(--ink)}
.sprig-dry{fill:var(--paper);opacity:.5}

@media (max-width:360px){
  .row{grid-template-columns:5rem 3.2rem minmax(0,1fr);gap:0 4px}
  .row .tag{padding-left:0}
  .branches .branches,.branch-item>.rows,.grp>.rows{margin-left:2px;padding-left:7px}
}

/* reading twig: grows along the top with the scroll, the status leaf at its tip */
.twig{display:none}
.tip-green{fill:#2f9a63}.tip-yellow{fill:#e0ab17}.tip-red{fill:#c22f26}.tip-black{fill:var(--ink)}

/* page changes */
.fly{position:fixed;z-index:9;pointer-events:none;overflow:visible;max-width:none}
.fly *{animation:none!important}
html.ink body{transition:none}
html.ink::view-transition-old(root),html.ink::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.ink::view-transition-new(root){z-index:1}
::view-transition-old(root),::view-transition-new(root){animation-duration:var(--t-change)}
::view-transition-group(leaf){z-index:2;animation-duration:var(--t-page);animation-timing-function:var(--ease-ink)}

@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  html{scroll-behavior:smooth}
  /* the seal presses in once, where the leaf lands */
  .block .seal{animation:press .36s var(--spring) .1s backwards}
  @keyframes press{from{scale:1.7;rotate:-14deg;opacity:0}}
  .sheet h1:not(.vh)::after{animation:draw .6s var(--ease-ink) .12s backwards}
  @keyframes draw{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 -2% 0 0)}}
  .sprig-wood{animation:reach 1s var(--ease-ink) .05s backwards}
  @keyframes reach{from{clip-path:inset(0 0 0 100%)}to{clip-path:inset(-20% -2% -20% -4%)}}
  .sprig-bud{animation:bud .5s var(--spring) calc(.7s + var(--n)*.14s) backwards}
  @keyframes bud{from{scale:0}}
  .sprig-leaf{animation:breeze var(--w) ease-in-out var(--p) infinite alternate}
  @keyframes breeze{from{rotate:-2.4deg}to{rotate:2.8deg}}
  @supports (animation-timeline:view()){
    .art-body>section+section::before,.next::before{animation:draw linear both;animation-timeline:view();animation-range:entry 20% entry 100%}
    .art-body figure{animation:settle linear both;animation-timeline:view();animation-range:entry 0 entry 170px}
    @keyframes settle{from{opacity:0;translate:0 20px;rotate:-.4deg}}
  }
  @supports (animation-timeline:scroll()){
    .twig{display:block;position:fixed;inset:17px 0 auto;height:4px;z-index:5;pointer-events:none}
    /* the text fades out under the twig instead of running through it; nothing shows at the very top of the page */
    .twig::after{content:"";position:absolute;inset:-17px 0 -15px;z-index:-1;background:linear-gradient(var(--paper) 62%,transparent);animation:veil 1ms linear both;animation-timeline:scroll(root)}
    @keyframes veil{0%{opacity:0}1.5%,100%{opacity:1}}
    .twig::before{content:"";position:absolute;inset:0;background:var(--ink);mask:var(--brush-l) 0 0/100% 100% no-repeat;transform-origin:0 50%;animation:twig 1ms linear both;animation-timeline:scroll(root)}
    .tip{position:absolute;left:0;top:-5px;width:26px;height:14px;transform-origin:1px 50%;animation:tip 1ms linear both;animation-timeline:scroll(root)}
    @keyframes twig{from{transform:scaleX(0)}}
    @keyframes tip{0%{translate:0 0;opacity:0}1.5%{opacity:1}100%{translate:calc(100vw - 30px) 0;opacity:1}}
  }
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after,::backdrop{animation:none!important;transition:none!important}.zoom:hover img{scale:1;rotate:none}.row a:hover .seal{rotate:none;scale:1}.yt:hover .play svg,.yt:focus-visible .play svg{scale:1}}
@media print{.top,.twig,.sprig{display:none}html.js .art-body figure img{opacity:1;filter:none}}
/* nothing dances between pages: same scrollbar room, same column, same button width */
html{overflow-y:scroll}
html[data-mode=night]{color-scheme:dark}
@media (prefers-color-scheme:dark){html:not([data-mode=paper]){color-scheme:dark}}
.sheet,.sheet.article{max-width:calc(39rem + 2*var(--gutter))}
@media (min-width:761px){.mode{width:1.5em;padding:0;text-align:center}}
/* the facts on About: label and value, one platform per line */
.facts{gap:6px 18px;font-size:1.05rem}
.facts dt{font-weight:400;font-size:1.15rem}
@media (max-width:480px){.facts{display:block}.facts dd{margin-bottom:10px}}