@font-face{font-family:Inter;src:url('./inter.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:Inter;src:url('./inter-italic.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
:root{--ease:cubic-bezier(.16,1,.3,1);--serif:'Iowan Old Style',Charter,Georgia,'Times New Roman',serif;--label:#8a8a8a}
*{box-sizing:border-box}
html{background:#fff;color:#111;font-family:Inter,Arial,sans-serif;-webkit-font-smoothing:antialiased}
body{margin:0;padding:28px clamp(20px,5vw,72px)}
body>*{max-width:1280px;margin-left:auto;margin-right:auto}
a{color:inherit;text-decoration:none}
a:hover{text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:2px}
a:focus-visible{outline:2px solid #111;outline-offset:6px}
header .mark{font-size:15px;font-weight:700;letter-spacing:-.01em}
main{margin-top:56px;margin-bottom:112px}

/* Overview: stacked headings with generous air between them. */
/* A blank writing line for copy the client fills in. */
.blank{display:inline-block;width:5.5em;height:.95em;margin:0 .12em;border-bottom:1.5px solid currentColor;vertical-align:baseline}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Home: a short introduction to Direction House. */
.intro{max-width:900px}
.intro .lead{font:400 clamp(24px,2.4vw,32px)/1.2 var(--serif);letter-spacing:-.01em;margin:18px 0 8px}
.intro .detail{margin:20px 0 32px}
.intro .list{max-width:680px;margin:0 0 clamp(40px,5vw,64px)}

/* Intro animation 1: a chat where each thing sent lands in the brief (14s loop, CSS only). */
.intro .kicker{margin:0 0 14px}
.demo,.tidy{margin:clamp(36px,5vw,64px) 0;max-width:980px}
.demo figcaption,.tidy figcaption{margin-top:14px;font-size:13px;color:#666}
.demo-stage{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(14px,2vw,24px);padding:clamp(14px,2vw,24px);background:#f6f5f2}
.chat{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -26px rgba(0,0,0,.35);display:flex;flex-direction:column;min-height:320px}
.chat-bar{display:flex;align-items:center;gap:6px;padding:10px 12px;border-bottom:1px solid #eee}
.chat-bar>i{width:9px;height:9px;border-radius:50%;background:#e2e0dc}
.chip{position:relative;margin-left:auto;display:inline-grid;font:600 11px/1 Inter,Arial,sans-serif}
.chip>span{grid-area:1/1;padding:7px 10px;border-radius:999px;white-space:nowrap}
.chip-a{background:#111;color:#fff}
.chip-b{background:#e9efe6;color:#2f5a35}
.msgs{flex:1;display:flex;flex-direction:column;justify-content:flex-end;gap:10px;padding:14px}
.msg{max-width:78%;display:flex;flex-direction:column;gap:6px;padding:10px 12px;border-radius:14px;background:#f1f0ed;font-size:14px;line-height:1.35}
.msg.me{align-self:flex-end;background:#1b2330;color:#fff;border-bottom-right-radius:4px}
.msg img{width:120px;aspect-ratio:4/5;object-fit:cover;border-radius:8px}
.msg .link{font-size:12px;text-decoration:underline;opacity:.8}
.mini{background:#fff;padding:16px;box-shadow:0 1px 2px rgba(0,0,0,.06);display:flex;flex-direction:column;gap:12px}
.mini-title{margin:0;font:400 20px/1.2 var(--serif)}
.slot{border-top:1px solid #eee;padding-top:10px;min-height:54px}
.slot .tag{display:block;margin:0 0 6px}
.fill{display:inline-block;font:400 16px/1.3 var(--serif)}
.fill img{width:64px;aspect-ratio:4/5;object-fit:cover}

/* Intro animation 2: scattered references tidy into brief columns (10s loop). */
.tidy-title{display:grid;margin:0 0 12px;font:400 clamp(22px,2.2vw,30px)/1.2 var(--serif)}
.tidy-title>span{grid-area:1/1}
.tidy-stage{position:relative;container-type:inline-size;aspect-ratio:100/58;background:#f6f5f2;overflow:hidden}
.col{position:absolute;top:2.5cqw;left:calc(var(--cx) * 1cqw);margin:0;font-size:clamp(8px,1.1cqw,11px)}
.bit{position:absolute;top:0;left:0;width:16cqw;translate:calc(var(--x1) * 1cqw) calc(var(--y1) * 1cqw);box-shadow:0 1px 2px rgba(0,0,0,.08),0 10px 22px -14px rgba(0,0,0,.4)}
.bit img{aspect-ratio:4/5;object-fit:cover}
.bit.pic{background:#fff;padding:.5cqw}
.bit.note{background:#fdf6d8;padding:1.2cqw;font:400 clamp(9px,1.5cqw,15px)/1.25 var(--serif)}
.bit.link{background:#fff;padding:1cqw 1.2cqw;font:500 clamp(8px,1.2cqw,12px)/1.2 Inter,Arial,sans-serif;text-decoration:underline;color:#2e5c8a}

@media (max-width:650px){
  .demo-stage{grid-template-columns:1fr}
  .chat{min-height:280px}
}
@media (prefers-reduced-motion:no-preference){
  .chip-a{animation:chip-a 14s infinite}
  .chip-b{animation:chip-b 14s infinite}
  .m1{animation:m1 14s infinite}.m2{animation:m2 14s infinite}.m3{animation:m3 14s infinite}.m4{animation:m4 14s infinite}
  .f1{animation:f1 14s infinite}.f2{animation:f2 14s infinite}.f3{animation:f3 14s infinite}
  .bit{animation:tidy 10s cubic-bezier(.65,0,.35,1) infinite}
  .col{animation:cols 10s infinite}
  .t-a{animation:t-a 10s infinite}.t-b{animation:t-b 10s infinite}
}
@media (prefers-reduced-motion:reduce){.chip-a,.t-a{opacity:0}}
@keyframes chip-a{0%,10%{opacity:1}14%,100%{opacity:0}}
@keyframes chip-b{0%,10%{opacity:0}14%,94%{opacity:1}100%{opacity:0}}
@keyframes m1{0%,18%{opacity:0;translate:0 12px}22%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes m2{0%,34%{opacity:0;translate:0 12px}38%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes m3{0%,50%{opacity:0;translate:0 12px}54%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes m4{0%,68%{opacity:0;translate:0 12px}72%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes f1{0%,26%{opacity:0;translate:-16px 0}31%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes f2{0%,42%{opacity:0;translate:-16px 0}47%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes f3{0%,58%{opacity:0;translate:-16px 0}63%,94%{opacity:1;translate:0}100%{opacity:0}}
@keyframes tidy{0%,22%{translate:calc(var(--x0) * 1cqw) calc(var(--y0) * 1cqw);rotate:var(--r)}42%,82%{translate:calc(var(--x1) * 1cqw) calc(var(--y1) * 1cqw);rotate:0deg}100%{translate:calc(var(--x0) * 1cqw) calc(var(--y0) * 1cqw);rotate:var(--r)}}
@keyframes cols{0%,30%{opacity:0}42%,82%{opacity:1}92%,100%{opacity:0}}
@keyframes t-a{0%,28%{opacity:1}38%,84%{opacity:0}94%,100%{opacity:1}}
@keyframes t-b{0%,28%{opacity:0}38%,84%{opacity:1}94%,100%{opacity:0}}

/* Story: a numbered timeline of prompts for the founders. */
.prompts{max-width:760px;margin:8px 0 clamp(40px,5vw,64px)}
.prompts li{font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);padding-bottom:22px}
.prompts li::before{font-family:Inter,Arial,sans-serif;padding-top:.6em}

/* Story: founder portraits as small overlapping circles. */
.founders{display:flex;margin-top:16px}
.founders img{width:56px;height:56px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 3px #fff,0 6px 16px -8px rgba(0,0,0,.4)}
.founders img+img{margin-left:-12px}
.founders.large{margin:22px 0 4px}
.founders.large img{width:88px;height:88px}
.founders.large img+img{margin-left:-16px}

/* Small tracked caps for labels. */
.kind,.tag,.detail .status{font:600 12px/1.4 Inter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase}
/* Masthead: the client's name in the editorial serif, the brief type as a quiet label. */
.company{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:16px;row-gap:4px;margin:0 0 clamp(24px,4vw,56px);font:400 clamp(34px,3.6vw,52px)/1 var(--serif);letter-spacing:-.02em}
.kind{color:var(--label)}
.row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:5vw;padding:clamp(24px,3.2vw,48px) 0}
/* Every summary's first line sits centred on its heading, however long the summary runs. */
.sum{padding-top:calc((clamp(40px,4.8vw,72px) - 1.25 * clamp(20px,1.9vw,26px)) / 2)}
.row h2,h1{font-size:clamp(40px,4.8vw,72px);font-weight:700;line-height:1;letter-spacing:-.065em;margin:0}
h1{font-size:clamp(48px,6.4vw,96px)}
.sum p{font-family:var(--serif);font-size:clamp(20px,1.9vw,26px);font-weight:400;line-height:1.25;letter-spacing:-.01em;max-width:26ch;margin:0;text-wrap:balance}
.tag{display:block;margin-top:12px;font-size:11px;font-weight:500;color:var(--label)}
/* A thick underline that draws in from the left on hover. */
.row a:hover{text-decoration:none}
.row h2{display:inline-block;padding-bottom:.08em;background:linear-gradient(currentColor,currentColor) 0 100%/0 max(3px,.06em) no-repeat;transition:background-size .5s var(--ease),translate .5s var(--ease)}
.row a:hover h2,.row a:focus-visible h2{background-size:100% max(3px,.06em);translate:6px 0}

/* Mood board: natural proportions, staggered and lightly pinned. */
.board{columns:4 200px;column-gap:clamp(14px,1.6vw,22px);margin:12px 0 clamp(40px,5vw,72px);max-width:1180px}
.board figure{break-inside:avoid;margin:0 0 clamp(18px,2vw,28px)}
.board figure:nth-child(3n+1){rotate:-.8deg}
.board figure:nth-child(3n+2){rotate:.9deg}
.board figure:nth-child(3n){rotate:-.4deg}
figure{margin:0}
img{display:block;width:100%;height:auto;background:#f5f5f5}
.board figure,.still figure{transition:rotate .6s var(--ease),scale .6s var(--ease)}
.board img,.still img{box-shadow:0 1px 2px rgba(0,0,0,.06),0 18px 40px -22px rgba(0,0,0,.35)}
.board figure:hover,.still figure:hover{rotate:0deg;scale:1.015}
.board figure:first-child img{background:#f8f8f6} /* the supplied anchor's own paper tone */
figcaption{font-size:12px;line-height:1.5;margin-top:12px;color:#666}
figcaption p{font-size:14px;line-height:1.45;color:#111;max-width:40ch;margin:2px 0 0}

/* Audience: customer portraits as one row of polaroids that scrolls sideways. */
.people{display:flex;align-items:flex-start;gap:clamp(16px,2vw,28px);overflow-x:auto;scroll-snap-type:x proximity;overscroll-behavior-x:contain;margin:0 calc(-1 * clamp(20px,5vw,72px)) clamp(24px,3vw,44px) 0;padding:18px clamp(20px,5vw,72px) 30px 6px;scrollbar-width:none;-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.people::-webkit-scrollbar{display:none}
.people:focus-visible{outline:2px solid #111;outline-offset:2px}
.people figure{flex:0 0 clamp(200px,20vw,260px);scroll-snap-align:start;position:relative;background:#fff;padding:5px 5px 0;box-shadow:0 1px 2px rgba(0,0,0,.08),0 14px 28px -16px rgba(0,0,0,.38);rotate:-2deg;transition:rotate .5s var(--ease),scale .5s var(--ease)}
.people figure:nth-child(even){rotate:1.8deg;margin-top:14px}
.people figure:nth-child(3n){rotate:-.8deg}
.people img{aspect-ratio:4/5;object-fit:cover;object-position:50% 22%;background:#eee}
.people figcaption{margin:0;padding:9px 3px 11px;font-size:12px;line-height:1.4;color:#555}
.people figcaption b{display:block;margin-bottom:3px;font:600 11px/1.3 Inter,Arial,sans-serif;letter-spacing:.08em;text-transform:uppercase;color:#111}
.people .fit{display:block;margin-bottom:4px;font:600 9px/1.2 Inter,Arial,sans-serif;letter-spacing:.12em;text-transform:uppercase;color:#9a9a9a}
.people figure:hover{rotate:0deg;scale:1.04;z-index:2}
.people-note{display:block;margin:0 0 clamp(32px,4vw,56px)}

/* Brand palette: Pana's core colours, then its accents. */
.swatches{margin:0 0 clamp(32px,4vw,56px);max-width:760px}
.palette{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.palette>div{font-size:11px;color:#777;font-variant-numeric:tabular-nums}
.palette b{display:block;font-size:12px;font-weight:600;color:#111}
.palette span{display:block;aspect-ratio:1.4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07);margin-bottom:8px;transform-origin:bottom}
.accents{margin-top:16px}
.accents span{aspect-ratio:3}
.swatches small{display:block;margin-top:14px}

/* Feelings */
/* Overview: the feeling words sit under the summary as a neat two-column list. */
.words{list-style:none;display:grid;grid-template-columns:repeat(2,max-content);gap:6px 28px;margin:18px 0 0;padding:0;font:400 17px/1.3 var(--serif)}
.words span{display:inline-block}
.words span::first-letter{text-transform:uppercase}
/* Chapter: a numbered three-column grid, large enough to read as the point of the page. */
.words.grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:28px 5vw;max-width:900px;margin:8px 0 clamp(48px,6vw,80px);font-size:clamp(24px,2.4vw,34px);counter-reset:word}
.words.grid li{counter-increment:word;display:flex;flex-direction:column;gap:6px}
.words.grid li::before{content:counter(word,decimal-leading-zero);margin:0;font:600 11px/1 Inter,Arial,sans-serif;letter-spacing:.1em;color:var(--label)}
.pairs{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:5vw;max-width:760px;margin:8px 0 clamp(48px,6vw,80px)}
.pairs .tag{margin:0 0 6px}
.pairs p{margin:0;padding:14px 0;font-family:var(--serif);font-size:clamp(19px,1.7vw,24px);line-height:1.25}
.pairs .not{color:#9a9a9a;text-decoration:line-through;text-decoration-thickness:1.5px;text-decoration-color:#c4c4c4}
.phrases{max-width:900px}
.phrases .tag{margin:0 0 14px}
.phrases p{margin:0 0 6px;font-family:var(--serif);font-size:clamp(30px,3.4vw,48px);line-height:1.12;letter-spacing:-.015em}

/* Chapter pages */
.back{display:inline-block;font-size:13px;margin-bottom:32px}
.detail{max-width:680px;margin:36px 0 48px;font-size:17px;line-height:1.65;letter-spacing:-.01em}
.detail p{margin:0 0 16px}
.detail .lead{font-family:var(--serif);font-size:clamp(24px,2.4vw,32px);line-height:1.2;letter-spacing:-.01em;margin-bottom:14px;text-wrap:balance}
small{font-size:12px;color:#666}
.detail .status{font-size:11px;font-weight:500;color:var(--label);margin-bottom:28px}

/* Sound */
/* Sound: a day of listening, then the main playlist. */
.day{list-style:none;margin:0 0 28px;padding:0;max-width:560px}
.day li{display:grid;grid-template-columns:130px 1fr;align-items:baseline;padding:10px 0}
.day .tag{margin:0}
.day a,.day .rec{font:400 clamp(19px,1.7vw,23px)/1.3 var(--serif)}
.sound-still,.content-still{max-width:440px}
/* Overview photos sit under the heading as small, staggered prints. */
.row-photos{display:flex;align-items:flex-start;gap:clamp(12px,1.6vw,20px);margin:22px 0 0 clamp(0px,3vw,48px)}
.row-photos .still{flex:0 0 auto;width:clamp(150px,15vw,200px);rotate:-1.4deg}
.row-photos .still:nth-child(2){width:clamp(190px,19vw,250px);margin-top:44px;rotate:1.2deg}
.row-photos .still:only-child{width:clamp(180px,19vw,240px)}
.row-photos .still:hover{rotate:0deg}
/* Three or more photos: a small staggered 2×2 cluster. */
.row-photos:has(>:nth-child(3)){display:grid;grid-template-columns:repeat(2,clamp(130px,13vw,175px));align-items:start}
.row-photos:has(>:nth-child(3)) .still{width:auto;margin-top:0}
.row-photos:has(>:nth-child(3)) .still:nth-child(even){margin-top:34px;rotate:1.4deg}
.row-photos:has(>:nth-child(3)) .still:nth-child(3){rotate:.8deg;margin-top:-10px}
.row-photos:has(>:nth-child(3)) .still:nth-child(4){rotate:-1deg;margin-top:20px}
/* Objects chapter: the photos as a small two-column board beside the list. */
.mini-board{columns:2 160px;column-gap:16px}
.mini-board .still{break-inside:avoid;margin-bottom:18px}
/* Content: two small staggered photos to the right of the summary. */
.sum.has-side{display:flex;align-items:flex-start;gap:clamp(18px,2.4vw,36px)}
.side-photos{display:flex;align-items:flex-start;gap:12px;flex:none}
.side-photos .still{width:clamp(110px,10vw,150px);rotate:-1.6deg}
.side-photos .still:nth-child(2){margin-top:36px;rotate:1.4deg}
.side-photos .still:hover{rotate:0deg}
.side-photos figcaption{display:none}
.founders-side img{aspect-ratio:1;object-fit:cover}
/* Story: the founders sit right beside the heading. */
.row-head:has(.head-photos){display:flex;align-items:flex-start;gap:clamp(16px,2vw,28px)}
.head-photos .still{width:clamp(72px,7.5vw,104px)}
.head-photos .still:nth-child(2){margin-top:22px}
/* Story chapter: text and prompts on the left, the founders in the open space on the right. */
.chapter-split{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,5vw,80px);align-items:start}
.chapter-founders{margin-top:36px}
.chapter-founders .still{width:clamp(140px,15vw,200px)}
.chapter-founders .still:nth-child(2){margin-top:56px}
/* Objects on the front page: one justified row. Each photo's share of the width follows its
   shape (--ar), so all share one height and the row ends flush with the right edge. */
.object-strip{display:flex;align-items:flex-start;gap:clamp(10px,1.4vw,18px);margin:0 0 clamp(24px,3vw,44px);padding:8px 2px 18px}
.object-strip .still{flex:var(--ar) 1 0;min-width:0}
.object-strip img{width:100%;height:auto}
.object-strip .still:nth-child(odd){rotate:-1deg}
.object-strip .still:nth-child(even){rotate:1deg}
.object-strip .still:hover{rotate:0deg}
.object-strip figcaption{display:none}
/* Captions live in the chapter; the front page shows the photos alone. */
.row-photos figcaption{display:none}
.cover{margin-top:clamp(40px,5vw,72px)}
/* Content: "Built with Pana" use cases as three small cards. */
.builds{margin-top:clamp(40px,5vw,72px);max-width:1100px}
.builds .tag{margin:0 0 14px}
.builds ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,24px)}
.builds li{padding:20px 20px 24px;background:#f6f5f2;font:400 clamp(18px,1.6vw,21px)/1.3 var(--serif)}
.builds b{display:block;margin-bottom:8px;font:600 11px/1.3 Inter,Arial,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#777}
.track{display:inline-flex;align-items:center;gap:18px;padding:18px 24px;border:1.5px solid #111;transition:background .25s,color .25s}
.track:hover{background:#111;color:#fff;text-decoration:none}
.track strong{display:block;font-size:18px;letter-spacing:-.02em}
.track small{color:inherit;opacity:.6}
.eq{display:inline-flex;align-items:flex-end;gap:3px;height:20px}
.eq i{width:3px;height:45%;background:currentColor}

/* Objects and Places: a short list beside one reference */
.pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:clamp(24px,5vw,72px);align-items:start;max-width:1100px}
.list{list-style:none;margin:0;padding:0;counter-reset:item}
.list li{counter-increment:item;display:grid;grid-template-columns:36px 1fr;font-size:clamp(18px,1.6vw,22px);line-height:1.3;letter-spacing:-.02em;padding:0 0 18px}
.list li::before{content:counter(item,decimal-leading-zero);font-size:12px;color:#888;padding-top:.35em}

/* Content: an imagined newspaper page */
.paper{max-width:560px;padding:32px;background:#f2f0e8;color:#18262d;rotate:-.8deg;box-shadow:0 18px 40px -24px rgba(24,38,45,.4);transition:rotate .6s var(--ease)}
.paper:hover{rotate:0deg}
.paper h3{font:40px/1.05 Georgia,serif;margin:0 0 12px;padding-top:14px;border-top:3px double currentColor}
.paper p{font:italic 17px/1.4 Georgia,serif;margin:0}
.cols{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:22px}
.cols i{height:64px;background:repeating-linear-gradient(to bottom,rgba(24,38,45,.22) 0 1px,transparent 1px 9px)}
.note{display:block;margin-top:20px}
footer{font-size:12px;color:#666}

@media(max-width:650px){
  body{padding:20px}
  main{margin-top:40px}
  .row{grid-template-columns:1fr;gap:10px;padding:22px 0}
  .sum{padding-top:0}
  .chapter-split{grid-template-columns:1fr}
  .object-strip{overflow-x:auto;scrollbar-width:none}
  .object-strip .still{flex:none}
  .object-strip img{width:auto;height:150px}
  .chapter-founders{margin-top:0}
  .row-photos{margin-left:0}
  .sum.has-side{flex-direction:column}
  .row h2{font-size:clamp(34px,10vw,48px)}
  h1{font-size:clamp(40px,12vw,56px)}
  .words.grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 16px}
  .sum p{font-size:20px;max-width:30ch}
  .board{columns:2;column-gap:12px}
  .pair{grid-template-columns:1fr}
  .palette{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 8px}
  .builds ul{grid-template-columns:1fr}
  .people figure{flex-basis:64vw}
  .pairs{column-gap:16px}
  .detail{font-size:16px;margin:28px 0 40px}
  .detail .lead{font-size:22px}
  .paper{padding:24px}
  .paper h3{font-size:30px}
}

/* ---------- Motion (CSS only; off for reduced motion) ---------- */
@media (prefers-reduced-motion:no-preference){
  header,.company,.back{animation:fade .8s var(--ease) both}
  /* Headings and summaries arrive in a quick cascade on load. */
  .row h2{animation:rise .9s var(--ease) backwards;animation-delay:calc(120ms + var(--i) * 70ms)}
  .row .sum{animation:rise .9s var(--ease) backwards;animation-delay:calc(200ms + var(--i) * 70ms)}
  .detail>*{animation:rise .9s var(--ease) backwards}
  .detail .lead{animation-delay:120ms}
  .detail .status{animation-delay:200ms}
  .detail p:nth-of-type(n+3){animation-delay:280ms}
  .eq i{animation:eq .9s ease-in-out infinite alternate}
  .eq i:nth-child(2){animation-duration:.7s;animation-delay:-.3s}
  .eq i:nth-child(3){animation-duration:1.1s;animation-delay:-.6s}
  .eq i:nth-child(4){animation-duration:.8s;animation-delay:-.15s}
  /* Further down, things settle in as they scroll into view. */
  @supports (animation-timeline:view()){
    .row,.board figure,.people figure,.pair,.track,.paper,.words,.pairs,.phrases p{animation:rise linear both;animation-timeline:view();animation-range:entry 0% entry 70%}
    .palette span{animation:grow linear both;animation-timeline:view();animation-range:entry calc(10% + var(--i) * 8%) cover 35%}
  }
  /* Between pages, an overview heading glides into its chapter title. */
  @view-transition{navigation:auto}
  ::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;translate:0 24px}}
@keyframes grow{from{transform:scaleY(0)}}
@keyframes eq{from{height:20%}to{height:100%}}