@font-face{font-family:FolioSerif;src:url('./assets/projects/folio/folio-serif.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:FolioSerif;src:url('./assets/projects/folio/folio-serif-italic.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
.now-header { display:flex; justify-content:space-between; align-items:center; gap:40px; padding:53px 0 45px; }
.now-eyebrow { display:flex; align-items:center; gap:12px; font-size:.8rem; letter-spacing:1px; color:#b7b7c0; }
.now-eyebrow > span:first-child,.now-eyebrow > span:last-child { color:var(--lime); }
.now-header h1 { display:flex; align-items:baseline; width:fit-content; font-family:var(--display); font-size:clamp(5.2rem,9.5vw,8.5rem); font-weight:700; letter-spacing:-.075em; line-height:1.1; margin:14px 0 17px; }
.now-header h1 > span:first-child { color:var(--lime); }
.now-header h1 > .now-asterisk { align-self:center; color:var(--purple); font-weight:400; font-size:.48em; margin-left:27px; letter-spacing:0; transform:rotate(13deg); }
.now-intro { font-size:1.125rem; color:#b9bac2; line-height:1.8; }
.now-update { display:flex; flex-direction:column; align-items:flex-end; gap:13px; min-width:190px; border-right:2px solid var(--purple); padding:5px 23px 5px 0; }
.now-update > .mono { font-size:.8rem; color:#a7a6b1; letter-spacing:1px; }
.now-update > time.mono { font-size:1.1rem; color:var(--text); letter-spacing:0; }
.now-building { display:flex; align-items:center; gap:9px; font-size:.875rem; color:var(--lime); }
.now-building i { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 12px #c4fa5a55; }
.now-timeline { border-top:1px solid var(--line); padding:27px 0 43px; }
.timeline-heading { display:flex; justify-content:space-between; align-items:center; margin-bottom:30px; gap:20px; }
.timeline-heading h2 { font-size:.875rem; font-weight:500; letter-spacing:1px; }
.timeline-heading > span { color:#a7a8b0; font-size:.8rem; }
.timeline-heading > span > span { color:var(--purple); margin:0 8px; }
.timeline-list { list-style:none; margin:0; padding:0; }
.timeline-entry { display:grid; grid-template-columns:145px minmax(0,1fr); gap:37px; position:relative; }
.entry-date { padding-top:28px; }
.entry-date time { display:flex; flex-direction:column; gap:6px; }
.entry-year { font-size:.8rem; color:#aaa9b6; letter-spacing:1px; }
.entry-day { font-family:var(--display); font-size:2.3rem; font-weight:500; letter-spacing:-2px; }
.entry-day > span { color:#62616e; padding:0 3px; }
.entry-label { display:block; color:var(--purple); font-size:.8rem; margin-top:12px; }
.milestone { position:relative; display:grid; grid-template-columns:minmax(0,1fr) 235px; min-width:0; border:1px solid #43443d; background:#18191c; border-radius:12px; }
.milestone::before { content:""; position:absolute; top:0; bottom:-43px; left:-23px; width:1px; background:linear-gradient(var(--lime),#4b5436 45%,#303134); }
.milestone::after { content:""; position:absolute; top:41px; left:-28px; width:9px; height:9px; background:var(--lime); border:1px solid #def8a5; border-radius:2px; box-shadow:0 0 0 5px var(--bg),0 0 23px #c4fa5a33; }
.milestone-copy { padding:28px 31px 30px; min-width:0; }
.milestone-kicker { display:flex; justify-content:space-between; align-items:center; gap:18px; color:var(--lime); font-size:.8rem; letter-spacing:.6px; }
.milestone-kicker > span:last-child { color:#90919b; }
.milestone h3 { max-width:520px; font-size:clamp(1.55rem,2.7vw,2.25rem); font-weight:650; line-height:1.55; letter-spacing:-.7px; margin:22px 0 14px; text-wrap:balance; }
.milestone-description { max-width:535px; font-size:1rem; line-height:1.95; color:#b8b9c4; }
.milestone-tags { display:flex; flex-wrap:wrap; gap:8px; list-style:none; padding:0; margin:23px 0 0; }
.milestone-tags li { font-size:.8rem; padding:6px 9px; color:#c4c4ce; background:#ffffff03; border:1px solid #3e3f47; border-radius:4px; }
.milestone-link { display:inline-flex; align-items:center; gap:24px; margin-top:29px; font-size:.875rem; color:var(--lime); padding:3px 0; }
.milestone-link > span:last-child { font-size:1.35rem; transition:transform .2s; }
.milestone-link:hover > span:last-child { transform:translate(3px,-3px); }
.milestone-art { display:flex; flex-direction:column; justify-content:space-between; position:relative; padding:28px 23px 24px; border-left:1px solid #444147; border-radius:0 11px 11px 0; color:#241c33; background-color:var(--purple); background-image:linear-gradient(#261e3110 1px,transparent 1px),linear-gradient(90deg,#261e3110 1px,transparent 1px); background-size:24px 24px; }
.day-one { align-self:flex-start; padding:8px 12px; border:1px solid #211631; background:var(--lime); border-radius:3px; font-size:.8rem; transform:rotate(-6deg); box-shadow:3px 3px 0 #241c3329; }
.day-number { font-family:var(--display); font-size:7rem; font-weight:600; letter-spacing:-.09em; line-height:1; margin:31px 0; }
.day-number > span { color:#ece4ff; }
.art-caption { display:flex; justify-content:space-between; align-items:flex-end; gap:12px; border-top:1px solid #241c3340; padding-top:18px; font-size:.875rem; line-height:1.5; letter-spacing:1px; }
.art-plus { font-size:2.75rem; font-weight:400; line-height:1; }
.timeline-origin { margin:31px 0 0 182px; display:flex; gap:10px; align-items:center; font-size:.8rem; color:#94959f; }
.timeline-origin > span:first-child { color:var(--purple); font-size:1.2rem; }
.now-page .site-footer { border-top:1px solid var(--line); }
.milestone--music { border-color:#584466; }
.milestone--music .milestone-kicker,.milestone--music .milestone-link { color:#d0adff; }
.milestone-progress { margin-top:14px; color:#a398b1; font-size:.8rem; line-height:1.8; }
.milestone--music .music-milestone-art { background-color:#30203f; color:#e0cbff; border-left-color:#584466; background-image:linear-gradient(#cfaaff0a 1px,transparent 1px),linear-gradient(90deg,#cfaaff0a 1px,transparent 1px); overflow:hidden; }
.music-milestone-art .day-one { background:var(--lime); color:#1c2512; border-color:#c4fa5a; }
.milestone-album-stack { position:relative; min-height:245px; width:100%; margin:25px 0; }
.milestone-album-stack img { position:absolute; width:155px; height:155px; object-fit:cover; border:1px solid #ffffff50; border-radius:4px; box-shadow:0 12px 24px #0005; transition:transform .45s; }
.milestone-album-stack img:first-child { top:0; left:-2px; transform:rotate(-10deg); }
.milestone-album-stack img:last-child { right:-1px; bottom:0; transform:rotate(9deg); }
.milestone--music:hover .milestone-album-stack img:first-child { transform:rotate(-13deg) translateY(-4px); }
.milestone--music:hover .milestone-album-stack img:last-child { transform:rotate(12deg) translateY(4px); }
.music-milestone-art .art-caption { border-color:#e0cbff40; }
.music-milestone-art .art-caption .symbol { width:26px; height:26px; color:var(--lime); }
@media(max-width:1000px) {
  .timeline-entry { grid-template-columns:112px minmax(0,1fr); gap:32px; }
  .milestone { grid-template-columns:minmax(0,1fr) 175px; }
  .milestone-copy { padding:25px; }
  .milestone-art { padding:25px 19px; }
  .day-number { font-size:5.5rem; }
  .timeline-origin { margin-left:144px; }
  .milestone-album-stack img { width:126px; height:126px; }
  .milestone-album-stack { min-height:220px; }
}
@media(max-width:700px) {
  .now-header { padding:36px 0 29px; align-items:flex-start; flex-direction:column; gap:25px; }
  .now-header h1 { margin:12px 0; font-size:6rem; }
  .now-intro { font-size:1rem; }
  .now-update { display:grid; grid-template-columns:1fr auto; width:100%; align-items:center; gap:11px 15px; border-right:0; border-left:2px solid var(--purple); padding:3px 0 3px 14px; }
  .now-update > time.mono { grid-column:1; grid-row:2; font-size:1rem; }
  .now-building { grid-column:2; grid-row:1/3; }
  .timeline-heading { margin-bottom:23px; }
  .timeline-entry { display:block; padding-left:22px; }
  .entry-date { padding:0 0 20px; display:flex; align-items:center; gap:15px; }
  .entry-date time { flex-direction:row; align-items:baseline; gap:12px; }
  .entry-day { font-size:1.75rem; }
  .entry-label { margin:0 0 0 auto; }
  .milestone { grid-template-columns:1fr; }
  .milestone::before { top:-52px; bottom:-42px; left:-20px; }
  .milestone::after { top:-35px; left:-25px; }
  .milestone-copy { padding:22px 21px 26px; }
  .milestone h3 { font-size:1.6rem; margin-top:20px; }
  .milestone-art { min-height:112px; flex-direction:row; align-items:center; gap:20px; border-left:0; border-top:1px solid #444147; border-radius:0 0 11px 11px; padding:18px 21px; }
  .day-one { align-self:center; font-size:.75rem; padding:7px 9px; }
  .day-number { margin:0; font-size:4rem; }
  .art-caption { border:0; padding:0; font-size:.75rem; }
  .art-plus { display:none; }
  .timeline-origin { margin-left:22px; }
  .milestone--music .music-milestone-art { min-height:180px; padding:22px; gap:12px; border-left:0; border-top-color:#584466; }
  .music-milestone-art .day-one { align-self:flex-start; position:absolute; top:19px; left:21px; font-size:.65rem; }
  .milestone-album-stack { min-height:125px; width:145px; flex-shrink:0; margin:25px 0 0; }
  .milestone-album-stack img { width:105px; height:105px; }
  .music-milestone-art .art-caption { align-self:flex-end; padding-bottom:8px; font-size:.65rem; flex-direction:column; align-items:flex-start; gap:12px; }
}
@media(max-width:380px) {
  .now-header h1 { font-size:5.1rem; }
  .now-header h1 > .now-asterisk { margin-left:20px; }
  .milestone-copy { padding:21px 17px 24px; }
  .milestone-art { gap:12px; padding:18px 17px; }
  .day-number { font-size:3.5rem; }
  .day-one { font-size:.75rem; padding:7px; }
  .art-caption { font-size:.75rem; letter-spacing:0; }
}

.milestone--game .game-milestone-art { background-color:#c4fa5a; color:#172514; overflow:hidden; gap:25px; }
.game-milestone-art strong { font-family:var(--display); font-size:2.7rem; line-height:.88; letter-spacing:-.06em; }
.game-milestone-art img { width:115%; height:auto; max-width:none; transform:rotate(-7deg); border:1px solid #192e20; box-shadow:0 10px 20px #14211340; }
.game-milestone-art .art-caption { border-color:#25351750; }
@media(max-width:700px) { .milestone--game .game-milestone-art { display:grid; grid-template-columns:1fr 1.3fr; gap:18px; padding:24px; } .game-milestone-art .day-one { grid-column:1/-1; justify-self:start; } .game-milestone-art strong { font-size:2.2rem; } .game-milestone-art img { width:100%; } .game-milestone-art .art-caption { grid-column:1/-1; } }

/* A warm paper chapter within the digital timeline. */
.milestone--folio { border-color:#8a715d; }
.milestone--folio .milestone-kicker,.milestone--folio .milestone-link { color:#e7b394; }
.milestone--folio .folio-milestone-art { background:#f6f3ec; color:#393a32; border-color:#8a715d; }
.folio-milestone-edition { font-size:10px; letter-spacing:1.8px; line-height:1.8; color:#805940; }
.folio-milestone-brand { display:flex; flex-direction:column; align-items:center; gap:14px; padding:34px 0; }
.folio-milestone-brand img { width:85px; height:85px; filter:drop-shadow(0 8px 12px #614b3220); transition:transform .5s; }
.folio-milestone-brand strong { font:italic 70px/.9 Georgia,serif; letter-spacing:-4px; font-weight:400; }
.folio-milestone-brand strong span { color:#ac5c40; }
.folio-milestone-art .art-caption { font-size:10px; letter-spacing:1px; border-color:#d1c6b5; }
.milestone--folio:hover .folio-milestone-brand img { transform:rotate(-7deg) translateY(-4px); }
@media(max-width:700px) {
  .milestone--folio .folio-milestone-art { flex-wrap:wrap; gap:22px; }
  .folio-milestone-edition { width:100%; }
  .folio-milestone-brand { padding:0; flex-direction:row; gap:12px; }
  .folio-milestone-brand img { width:42px; height:42px; }
  .folio-milestone-brand strong { font-size:43px; letter-spacing:-2px; }
  .folio-milestone-art .art-caption { margin-left:auto; font-size:9px; }
  .folio-milestone-art .art-caption > span:last-child { display:none; }
}
@media(prefers-reduced-motion:reduce) { .folio-milestone-brand img { transition:none; } .milestone--folio:hover .folio-milestone-brand img { transform:none; } }
.milestone--folio11{background:#f6f3ec;border-color:#c4b499;color:#423c31;--folio-serif:FolioSerif,Georgia,'SimSun',serif}
.milestone--folio11 .milestone-kicker{color:#966446}.milestone--folio11 h3{font:400 clamp(1.7rem,2.8vw,2.35rem)/1.5 var(--folio-serif);color:#574536;letter-spacing:-.025em}.milestone--folio11 .milestone-description{color:#786651}.milestone--folio11 .milestone-tags li{color:#75624c;border-color:#d3c4af;background:#ede5d8}.milestone--folio11 .milestone-link{color:#934b32}.folio11-note{font-size:.75rem;line-height:1.8;color:#856f57;margin:18px 0}.folio11-links{display:flex;flex-wrap:wrap;gap:14px 26px}.folio11-links .milestone-link{margin-top:7px}
.folio11-art{background:#e8dfcf;border-color:#c4b499;position:relative;overflow:hidden;padding:27px 23px;gap:25px}.folio11-running,.folio11-colophon{font-size:.58rem;letter-spacing:1.7px;line-height:1.8;color:#866446}.folio11-page{align-self:center;width:100%;background:#f9f5ec;padding:27px 22px;transform:rotate(-5deg);box-shadow:4px 4px #e2d7c6,5px 5px #bcaa91,8px 8px #eee5d6,9px 9px #bcaa91,8px 18px 25px #5e432123;transition:transform .6s cubic-bezier(.2,.7,.2,1)}.folio11-page>span{font-size:.58rem;letter-spacing:1.6px;color:#89694d}.folio11-page strong{display:block;font:400 6.5rem/1.2 var(--folio-serif);letter-spacing:-8px;color:#a65d40;white-space:nowrap}.folio11-page strong>span{font:400 1.6rem Georgia;display:inline-block;margin-left:13px;vertical-align:top;padding-top:20px;letter-spacing:0;color:#7c8a68}.folio11-page em{font:italic 1.2rem/1.4 var(--folio-serif);color:#79634c}.folio11-rule{height:1px;background:#d9c9b1;margin:22px 0 15px}.folio11-page small{font-size:.55rem;letter-spacing:1.2px;color:#927756}.folio11-art>img{width:110%;height:auto;max-width:none;transform:rotate(5deg);box-shadow:0 8px 18px #5e432122;border:1px solid #b6a285;transition:transform .6s}.milestone--folio11:hover .folio11-page{transform:rotate(-2deg) translateY(-4px)}.milestone--folio11:hover .folio11-art>img{transform:rotate(2deg) translateY(-3px)}
@media(max-width:700px){.folio11-art{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px;padding:25px 28px;align-items:center}.folio11-running,.folio11-colophon{grid-column:1/-1}.folio11-page{padding:19px 15px}.folio11-page strong{font-size:4rem;letter-spacing:-4px}.folio11-page strong>span{font-size:1.2rem;margin-left:8px;padding-top:14px}.folio11-page em{font-size:.95rem}.folio11-art>img{width:100%}.folio11-rule{margin:14px 0 10px}.folio11-page small{font-size:.45rem}}
@media(prefers-reduced-motion:reduce){.folio11-page,.folio11-art>img{transition:none}.milestone--folio11:hover .folio11-page{transform:rotate(-5deg)}.milestone--folio11:hover .folio11-art>img{transform:rotate(5deg)}}