:root{--ground:#FFF8F1;--paper:#FFFFFF;--ink:#4A3B36;--muted:#8A7670;--rule:#F7D6DE;--berry:#E2708A;--berry-soft:#FDE7EC;--tint:#FFF1E4;--focus:#E2708A;--c1:#4A3B36;--c2:#CDEBDD;--band:#FFEFE0;--blush:#F9C5D1;--peach:#FFD9B8;--mint:#CDEBDD;--lav:#DDD6F5;--cocoa:#4A3B36;
--display:"Instrument Serif",Georgia,"Times New Roman",serif;--sans:"Source Sans 3","Source Sans Pro",system-ui,-apple-system,sans-serif}
[hidden]{display:none!important}
html{background:#FFF8F1}
body{background:#FFF8F1;color:#4A3B36;font:18px/1.55 var(--sans);-webkit-font-smoothing:antialiased}
.wrap{max-width:880px;margin:0 auto;padding-inline:16px;padding-block:40px 80px}
.top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
.lbl{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--berry)}
.kicker{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--berry);margin:0 0 16px}
h1{font:400 clamp(44px,8vw,76px)/.98 var(--display);letter-spacing:-.01em;margin:0 0 16px;text-wrap:balance}
.dek{font:italic 400 24px/1.35 var(--display);color:var(--muted);margin:0 0 10px;max-width:30em;text-wrap:balance}
.by{font:15px var(--sans);color:var(--muted);margin:0 0 48px}
section{margin:0 0 72px;scroll-margin-top:12px}
.sh{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 10px}
.when{font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--cocoa);background:var(--peach);border-radius:999px;padding:7px 11px}
h2{font:400 clamp(28px,4vw,38px)/1.1 var(--display);margin:0;text-wrap:balance}
.count{font:600 12px var(--sans);color:var(--cocoa);background:var(--mint);border-radius:999px;padding:6px 11px;margin-left:auto}
p{margin:0 0 14px;max-width:60ch}
p.lead{font-size:18px}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:18px 0 12px;padding:6px 8px 12px 4px}
.pair figure{margin:0;display:grid;gap:12px;justify-items:center}
.pair img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28%;display:block;background:var(--tint);border:4px solid #fff;box-shadow:0 0 0 2px var(--ring),5px 6px 0 var(--ring)}
.pair figcaption{font:600 13px/1.3 var(--sans);color:var(--cocoa);background:#fff;border:2px solid var(--ring);border-radius:999px;padding:6px 12px;text-align:center;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.pair figure:hover figcaption{transform:translateY(-2px)}
.pair figure:nth-child(1){--ring:var(--blush)}.pair figure:nth-child(2){--ring:var(--mint)}
.strip{display:grid;grid-template-columns:repeat(7,1fr);gap:12px;margin:18px 0 10px;padding:6px 4px}
.strip.s9{grid-template-columns:repeat(9,1fr);gap:10px}
@media (max-width:560px){.strip.s9{grid-template-columns:repeat(5,1fr)}}
@media (max-width:560px){.strip{grid-template-columns:repeat(4,1fr)}}
.strip img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28%;display:block;background:var(--tint);border:3px solid #fff;box-shadow:0 0 0 2px var(--ring);transform:rotate(var(--tilt))}
img.r0{--ring:var(--blush)}img.r1{--ring:var(--peach)}img.r2{--ring:var(--mint)}img.r3{--ring:var(--lav)}
.strip img:nth-child(4n+1){--tilt:-4deg}.strip img:nth-child(4n+2){--tilt:3deg}.strip img:nth-child(4n+3){--tilt:-3deg}.strip img:nth-child(4n+4){--tilt:4deg}
details{margin-top:6px}
summary{cursor:pointer;list-style:none;display:inline-flex;align-items:center;gap:8px;font:600 13px var(--sans);letter-spacing:.02em;color:var(--cocoa);background:#fff;border:2px solid var(--cocoa);border-radius:999px;padding:6px 14px;box-shadow:2px 2px 0 var(--cocoa);user-select:none;margin-top:6px;transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
summary:hover{transform:translate(-1px,-1px)}
summary::-webkit-details-marker{display:none}
summary::before{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(-45deg);transition:transform .15s}
details[open] summary::before{transform:rotate(45deg)}
summary:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:4px}
.more{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:12px;padding:14px 4px 4px}
.more img{width:100%;aspect-ratio:1;object-fit:cover;border-radius:28%;display:block;background:var(--tint);border:3px solid #fff;box-shadow:0 0 0 2px var(--ring)}
.sl{grid-column:1/-1;font:600 11px/1 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--berry);margin:8px 0 2px}
.end{font:15px/1.5 var(--sans);color:var(--muted);border-top:2px dotted var(--blush);padding-top:16px;max-width:none}
.bar{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
button{font:600 13px var(--sans);letter-spacing:.02em;color:var(--cocoa);background:#fff;border:2px solid var(--cocoa);border-radius:999px;padding:7px 14px;cursor:pointer;box-shadow:2px 2px 0 var(--cocoa);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s}
button:hover{transform:translate(-1px,-1px);box-shadow:3px 3px 0 var(--cocoa)}
button:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
button.primary{background:var(--blush);color:var(--cocoa);border-color:var(--cocoa)}
button[disabled]{opacity:.5;cursor:default}
.cbtn{font-size:12px;padding:4px 10px;margin-left:8px}
.status{font:13px var(--sans);color:var(--muted)}
[contenteditable="true"]{outline:1.5px dashed var(--focus);outline-offset:4px;border-radius:3px;background:var(--berry-soft)}
[contenteditable="true"]:focus{outline-style:solid}
img[data-d]{cursor:pointer}
img[data-d]:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.card{position:fixed;z-index:20;background:#fff;color:var(--ink);border:2px solid var(--blush);border-radius:20px;padding:12px 14px;box-shadow:4px 5px 0 var(--blush);font:14px/1.45 var(--sans);pointer-events:none;display:grid;gap:8px}
.card.pinned{pointer-events:auto;border-color:var(--cocoa);box-shadow:4px 5px 0 var(--cocoa)}
.card .row{display:grid;gap:2px}
.card .val{overflow-wrap:anywhere}
.card .acts{display:flex;gap:6px;flex-wrap:wrap;padding-top:2px}
.card .acts button{font-size:12px;padding:4px 10px}
.rail{position:fixed;left:20px;top:50%;transform:translateY(-50%);width:220px;display:none;flex-direction:column;gap:2px;border-left:2px dotted var(--blush);padding-left:14px;max-height:80vh;overflow:auto}
@media (min-width:1400px){.rail{display:flex}}
.rail a{text-decoration:none;color:var(--muted);font:14px/1.3 var(--sans);padding:3px 0;display:grid;grid-template-columns:76px 1fr;gap:8px;position:relative}
.rail a b{font:600 10px/1.3 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);padding-top:3px}
.rail a.on{color:var(--ink)} .rail a.on b{color:var(--berry)}
.rail a.on::before{content:"";position:absolute;left:-16px;top:6px;width:4px;height:calc(100% - 10px);background:var(--blush);border-radius:4px}
figure.fig{margin:22px 0 30px;display:grid;gap:10px;background:#fff;border:2px solid var(--blush);border-radius:24px;padding:18px 18px 16px;box-shadow:5px 6px 0 var(--blush)}
figure.fig svg{width:100%;height:auto;display:block;font:14px var(--sans)}
figure.fig figcaption{font:15px/1.4 var(--sans);color:var(--muted);max-width:60ch}
.legend{display:flex;gap:14px;flex-wrap:wrap;font:13px var(--sans);color:var(--muted)}
.legend i{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:6px;vertical-align:-1px}
.tw{overflow-x:auto}
@media (prefers-reduced-motion:reduce){summary::before{transition:none}}

/* second series in black too: hollow ring */
.legend i.ring{background:#fff;border:2px solid var(--cocoa)}
.legend i.mint{background:var(--mint);border:2px solid var(--cocoa)}
.legend i.lav{background:var(--lav)}

/* reveal on scroll: bouncy landing; first view stays at rest */
.rv{opacity:0;transform:translateY(18px) scale(.96)}
.rv.in{animation:kwBounce .6s cubic-bezier(.34,1.56,.64,1) both}
.rv.in .pair figure,.rv.in .strip img{animation:kwBounce .55s cubic-bezier(.34,1.56,.64,1) both}
.rv.in .pair figure:nth-child(2){animation-delay:.14s}
.rv.in .strip img:nth-child(2){animation-delay:.07s}.rv.in .strip img:nth-child(3){animation-delay:.14s}.rv.in .strip img:nth-child(4){animation-delay:.21s}.rv.in .strip img:nth-child(5){animation-delay:.28s}.rv.in .strip img:nth-child(6){animation-delay:.35s}.rv.in .strip img:nth-child(7){animation-delay:.42s}
.rv .pair figure,.rv .strip img{opacity:0}
figure.fig.rv svg{opacity:0;transform:translateY(10px);transition:opacity .5s ease .2s,transform .5s cubic-bezier(.34,1.56,.64,1) .2s}
figure.fig.rv.in svg{opacity:1;transform:none}
.strip img{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.strip img:hover{transform:rotate(var(--tilt)) scale(1.1)}
.pair img{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.pair img:hover{transform:scale(1.06) rotate(-2deg)}
.more img{transition:transform .25s cubic-bezier(.34,1.56,.64,1)}
.more img:hover{transform:scale(1.08) rotate(2deg)}
h1{opacity:0;animation:kwBounce .6s cubic-bezier(.34,1.56,.64,1) .05s both}
.dek{opacity:0;animation:kwBounce .6s cubic-bezier(.34,1.56,.64,1) .2s both}
@keyframes kwBounce{0%{transform:translateY(18px) scale(.96);opacity:0}60%{transform:translateY(-6px) scale(1.02);opacity:1}100%{transform:none;opacity:1}}
.strip img.r0,.strip img.r1,.strip img.r2,.strip img.r3{animation-name:kwBounceTilt}
@keyframes kwBounceTilt{0%{transform:translateY(18px) scale(.96) rotate(var(--tilt));opacity:0}60%{transform:translateY(-6px) scale(1.02) rotate(var(--tilt));opacity:1}100%{transform:rotate(var(--tilt));opacity:1}}
@media (prefers-reduced-motion:reduce){.rv,.rv .pair figure,.rv .strip img,figure.fig.rv svg{opacity:1;transform:none;animation:none;transition:none}.rv.in,.rv.in .pair figure,.rv.in .strip img{animation:none}h1,.dek{opacity:1;animation:none}.strip img,.pair img,.more img,button,summary,.pair figcaption{transition:none}.strip img{transform:none}}
.brand{display:flex;align-items:center;gap:10px;margin:0 0 16px}
.brand svg{width:40px;height:40px;flex:none}
.brand .kicker{margin:0}
.note{font:14px/1.5 var(--sans);color:var(--muted);max-width:60ch;margin:6px 0 10px}
.sl+.note{grid-column:1/-1}