/* Kris Struble — portfolio (prototype, 2026-09-28)
   One page per chapter, a fixed index, and quiet motion: pages cross-fade, the chapter picture
   grows out of its tile, and content drifts in as it scrolls into view. */

:root{
  --paper:#ede3de;
  --card:#f7f2ee;
  --ink:#17201b;
  --stone:#5c6258;
  --rule:#d6ccc5;
  --accent:#0b6e4f;
  --accent-ink:#07452f;
  --serif:"Newsreader","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  --sans:"IBM Plex Sans","Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,Consolas,monospace;
  --index-w:300px;
  --gutter:clamp(20px,4vw,64px);
  --measure:62ch;
  --ease:cubic-bezier(.2,.7,.2,1);
  /* Motion: change these to slow down or calm the whole site. */
  --reveal-time:.9s;
  --reveal-rise:22px;
  --page-fade:.45s;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font:400 18px/1.62 var(--serif);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,iframe{max-width:100%;display:block}
img,video{height:auto}
a{color:var(--accent);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--accent) 35%,transparent);text-underline-offset:3px}
a:hover{color:var(--accent-ink);text-decoration-color:currentColor}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;background:var(--card);padding:8px 12px;z-index:50}
.label{font:500 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
.mono{font-family:var(--mono);font-size:.82em}

/* ── the index ─────────────────────────────────────────────────────── */
.index{position:fixed;inset:0 auto 0 0;width:var(--index-w);padding:40px 28px 28px 36px;
  display:flex;flex-direction:column;gap:22px;overflow-y:auto;border-right:1px solid var(--rule);
  background:var(--paper);z-index:30;view-transition-name:index}
.index .name{font:500 30px/1 var(--serif);letter-spacing:-.01em;color:var(--ink);text-decoration:none}
.index .role{margin:-8px 0 6px;font:italic 400 15px/1.4 var(--serif);color:var(--stone)}
.index ol,.index ul{list-style:none;margin:0;padding:0}
.index nav a{display:grid;grid-template-columns:2.6em 1fr;align-items:baseline;padding:5px 0;
  color:var(--ink);text-decoration:none;font:400 15px/1.3 var(--sans);position:relative}
.index nav .num{font:italic 400 15px/1 var(--serif);color:var(--stone)}
.index nav .t{transition:transform .35s var(--ease)}
.index nav a:hover .t{transform:translateX(4px);color:var(--accent)}
.index nav a[aria-current="page"]{color:var(--accent-ink);font-weight:600}
.index nav a[aria-current="page"] .num{color:var(--accent)}
.index nav a[aria-current="page"]::before{content:"";position:absolute;left:-36px;top:50%;width:24px;height:1px;background:var(--accent)}
.elsewhere{margin-top:auto !important;display:flex;flex-wrap:wrap;gap:6px 16px;font:500 13px/1.4 var(--sans)}
.elsewhere a{color:var(--stone);text-decoration:none}
.elsewhere a:hover{color:var(--accent)}
.mobilebar{display:none}

main,.foot{margin-left:var(--index-w);padding-inline:var(--gutter)}
main{max-width:calc(var(--index-w) + 1240px);min-height:100vh}
.foot{padding-block:40px 48px;font:400 13px/1.5 var(--sans);color:var(--stone);border-top:1px solid var(--rule)}

@media (max-width:900px){
  :root{--index-w:0px}
  .mobilebar{display:flex;position:sticky;top:0;z-index:40;align-items:center;justify-content:space-between;
    padding:12px var(--gutter);background:color-mix(in srgb,var(--paper) 92%,transparent);
    backdrop-filter:blur(8px);border-bottom:1px solid var(--rule);view-transition-name:mobilebar}
  .mobilebar .name{font:500 22px/1 var(--serif);color:var(--ink);text-decoration:none}
  .index-toggle{font:500 13px/1 var(--sans);letter-spacing:.1em;text-transform:uppercase;background:none;
    border:1px solid var(--ink);color:var(--ink);padding:9px 14px;border-radius:2px;cursor:pointer}
  .js .index{width:100%;inset:57px 0 0 0;border:0;padding:28px var(--gutter);
    opacity:0;visibility:hidden;transform:translateY(-8px);
    transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
  .js .index.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
  .js .index .name{display:none}
  .index nav a{font-size:18px;padding:9px 0}
  html:not(.js) .index{position:static;width:auto;border:0;border-bottom:1px solid var(--rule)}
}

/* ── home ──────────────────────────────────────────────────────────── */
.intro{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:clamp(28px,5vw,80px);
  align-items:end;padding:clamp(56px,10vh,120px) 0 clamp(48px,8vh,96px)}
.display{font-weight:300;font-size:clamp(44px,6.4vw,92px);line-height:.98;letter-spacing:-.025em;margin:.3em 0 .45em}
.lead{font-size:clamp(20px,1.8vw,23px);line-height:1.5;max-width:var(--measure);margin:0 0 1em}
.intro p{max-width:var(--measure)}
.intro-figure{margin:0}
.intro-figure img{width:100%;filter:drop-shadow(0 18px 24px rgba(23,32,27,.18))}
.intro-figure figcaption{font:italic 400 14px/1.4 var(--serif);color:var(--stone);text-align:center;margin-top:10px}

.contents{padding-bottom:clamp(56px,10vh,120px)}
.contents>.label{margin:0 0 22px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:48px 28px}
.tile{display:grid;grid-template-columns:auto 1fr;column-gap:14px;row-gap:2px;color:var(--ink);text-decoration:none}
.tile-img{grid-column:1/-1;aspect-ratio:4/5;overflow:hidden;background:var(--card);margin-bottom:14px;border-radius:2px}
.tile-img img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.tile-num{grid-row:span 2;font:italic 300 44px/.9 var(--serif);color:var(--stone);min-width:1.4em}
.tile-title{font:500 20px/1.2 var(--serif);align-self:end}
.tile-tag{font:500 11px/1.4 var(--sans);letter-spacing:.1em;text-transform:uppercase;color:var(--stone)}
.tile:hover .tile-img img{transform:scale(1.035)}
.tile:hover .tile-title{color:var(--accent)}
@media (max-width:600px){.tiles{grid-template-columns:1fr 1fr;gap:32px 14px}.tile{column-gap:8px}.tile-num{font-size:28px}.tile-title{font-size:16px}.tile-tag{display:none}}

.about{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:clamp(28px,5vw,72px);
  padding:clamp(48px,8vh,96px) 0;border-top:1px solid var(--rule)}
.about h2{font-weight:400;font-size:clamp(32px,4vw,52px);line-height:1.05;letter-spacing:-.015em;margin:.3em 0 .5em}
.about p{max-width:var(--measure)}
.facts{list-style:none;margin:0;padding:0;font:400 15px/1.5 var(--sans);align-self:start}
.facts li{display:grid;grid-template-columns:7.5em 1fr;gap:12px;padding:11px 0;border-bottom:1px solid var(--rule)}
.facts li>span:first-child{font:500 11px/2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone)}
@media (max-width:760px){.intro,.about{grid-template-columns:1fr}.intro-figure{max-width:260px;order:-1}}

/* ── a chapter ─────────────────────────────────────────────────────── */
.chapter-head{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(28px,5vw,72px);
  align-items:center;padding:clamp(40px,8vh,96px) 0 clamp(40px,7vh,80px);border-bottom:1px solid var(--rule)}
.chapter-head.no-cover{grid-template-columns:1fr}
.chapter-num{font:italic 300 clamp(88px,13vw,180px)/.8 var(--serif);color:color-mix(in srgb,var(--stone) 55%,var(--paper));
  margin:0 0 .12em;letter-spacing:-.03em}
.chapter-head h1{font-weight:400;font-size:clamp(40px,5.2vw,76px);line-height:1;letter-spacing:-.02em;margin:.25em 0 .4em}
.shows{list-style:none;padding:0;margin:1.4em 0 0;display:flex;flex-wrap:wrap;gap:8px}
.shows li{font:500 12px/1 var(--sans);letter-spacing:.06em;padding:7px 11px;border:1px solid var(--rule);border-radius:99px;color:var(--stone)}
.chapter-cover{margin:0}
.chapter-cover img{width:100%;max-height:78vh;object-fit:contain;border-radius:2px}
.chapter-cover figcaption{font:italic 400 14px/1.45 var(--serif);color:var(--stone);margin-top:10px}
@media (max-width:760px){.chapter-head{grid-template-columns:1fr}.chapter-cover{order:-1}}

.chapter-body{padding:clamp(40px,7vh,80px) 0}
.chapter-body>*+*{margin-top:clamp(36px,6vh,72px)}
.section-title{font:500 12px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--stone);
  padding-bottom:12px;border-bottom:1px solid var(--rule)}
.chapter-body h2:not(.section-title){font-weight:500;font-size:clamp(24px,2.4vw,30px);line-height:1.15;margin:0 0 .5em}
.prose h3{font:500 22px/1.25 var(--serif);margin:1.4em 0 .4em}
.prose h3:first-child{margin-top:0}
.prose p{max-width:var(--measure)}
.note{font-style:italic;color:var(--stone)}

/* pull quote */
.pull{margin-inline:0;padding:0 0 0 clamp(20px,3vw,40px);border-left:2px solid var(--accent);max-width:36ch}
.pull p{font:italic 300 clamp(26px,3vw,38px)/1.2 var(--serif);margin:0;letter-spacing:-.01em}

/* stats */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;border-block:1px solid var(--rule);padding:28px 0}
.stats b{display:block;white-space:nowrap;font:300 clamp(30px,3vw,46px)/1 var(--serif);letter-spacing:-.02em;margin-bottom:10px}
.stats span{font:400 14px/1.45 var(--sans);color:var(--stone)}
.chapter-body .stats{margin-block:clamp(36px,6vh,72px)}

/* figures, grids and splits (also used by the carried-over chapters) */
figure{margin:0}
figcaption{font:400 14px/1.5 var(--sans);color:var(--stone);margin-top:10px;max-width:60ch}
figcaption b{color:var(--ink);font-weight:500}
.fig img,.fig video{border-radius:2px}
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);align-items:start}
.split.wide-left{grid-template-columns:1.3fr 1fr}
.grid{display:grid;gap:22px;margin-top:22px}
.grid.g2{grid-template-columns:1fr 1fr}
.grid.g3{grid-template-columns:repeat(3,1fr)}
.wide-figure video,.wide-figure img{width:100%;max-height:78vh;object-fit:contain;border-radius:2px;background:#000}
@media (max-width:760px){.split,.split.wide-left,.grid.g2,.grid.g3{grid-template-columns:1fr}}

.calls{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.call{background:var(--card);padding:22px 24px;border-radius:2px}
.call p{margin:.5em 0 0}
.call.firm{border-top:2px solid var(--accent)}
.call.flex{border-top:2px dashed var(--stone)}
@media (max-width:760px){.calls{grid-template-columns:1fr}}

.timeline{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;counter-reset:step;border-top:1px solid var(--ink)}
.timeline li{counter-increment:step;padding:16px 18px 18px 0;border-right:1px solid var(--rule)}
.timeline li::before{content:counter(step,decimal-leading-zero);display:block;font:500 11px/1 var(--mono);color:var(--accent);margin-bottom:10px}
.timeline b{display:block;font:500 17px/1.25 var(--serif)}
.timeline span{display:block;font:400 14px/1.45 var(--sans);color:var(--stone);margin-top:4px}

.specimens .item{padding:18px 0;border-bottom:1px solid var(--rule)}
.specimens .item:first-child{padding-top:0}
.specimens h3{font:500 20px/1.25 var(--serif);margin:0 0 .3em}
.specimens p{margin:.3em 0}

.drawer{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:28px 22px}
.drawer figure,.gallery figure{margin:0}
.drawer img{width:100%;aspect-ratio:1;object-fit:contain;background:var(--card);border-radius:2px;padding:10px}
button[data-full]{all:unset;display:block;cursor:zoom-in;border-radius:2px;overflow:hidden}
button[data-full]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
button[data-full] img{transition:transform .8s var(--ease)}
button[data-full]:hover img{transform:scale(1.03)}
.licensed{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:12px 0 0}
.licensed a{display:inline-block;padding:8px 13px;border:1px solid var(--rule);border-radius:99px;font:500 14px/1 var(--sans);text-decoration:none}

.gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:28px 22px}
.gallery img{width:100%;aspect-ratio:1;object-fit:cover}
.loops{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.loops video{width:100%;border-radius:2px}
.closing{border-top:1px solid var(--rule);padding-top:28px}

/* a strip of document pages: scrolls sideways, each page opens large */
.docs{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,16vw,210px);gap:18px;overflow-x:auto;
  padding:4px 2px 14px;scroll-snap-type:x proximity;scrollbar-width:thin}
.docs figure{scroll-snap-align:start}
.docs img{width:100%;aspect-ratio:8.5/11;object-fit:cover;object-position:top;background:#fff;
  box-shadow:0 1px 2px rgba(23,32,27,.12),0 10px 22px -14px rgba(23,32,27,.35)}
.docs figcaption{font-size:13px}

/* two things side by side, e.g. version 1 and version 2 */
.compare{display:grid;grid-template-columns:1fr 1fr;gap:0;border-top:1px solid var(--ink)}
.compare>div{padding:22px 28px 6px 0}
.compare>div+div{padding-left:28px;border-left:1px solid var(--rule)}
.compare .label{display:block;margin-bottom:8px}
.compare h3{font:400 clamp(24px,2.4vw,32px)/1.1 var(--serif);margin:0 0 .4em}
@media (max-width:760px){.compare{grid-template-columns:1fr}.compare>div+div{padding-left:0;border-left:0;border-top:1px solid var(--rule)}}

/* a checked list of what was produced */
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:0 28px}
.checks li{padding:13px 0 13px 30px;border-bottom:1px solid var(--rule);position:relative;font:400 17px/1.4 var(--serif)}
.checks li::before{content:"";position:absolute;left:2px;top:19px;width:12px;height:7px;border-left:1.5px solid var(--accent);
  border-bottom:1.5px solid var(--accent);transform:rotate(-45deg)}

/* keycaps */
.keys{display:flex;flex-wrap:wrap;align-items:center;gap:10px;font:500 20px/1 var(--sans)}
.keys kbd{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 10px;border:1px solid var(--ink);
  border-bottom-width:3px;border-radius:6px;background:var(--card);font:500 20px/1 var(--mono)}
.keys .arrow{color:var(--stone)}
.keys .out{display:flex;gap:6px}
.keys .out span{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:6px;background:var(--ink);color:var(--paper);font:400 22px/1 var(--serif)}
.keys .out span:first-child{background:var(--accent)}

.group-title{font:italic 400 clamp(22px,2vw,28px)/1.2 var(--serif);margin:0 0 18px;color:var(--ink)}
.tags{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.tags li{font:400 16px/1 var(--serif);padding:10px 15px;border:1px solid var(--rule);border-radius:99px;background:var(--card)}
.screen{background:#1d2320;padding:clamp(14px,2vw,26px);border-radius:4px}
.screen img{margin:auto;border-radius:2px}
.screen+figcaption{margin-top:12px}

.docs.wide{grid-auto-columns:clamp(220px,26vw,340px)}
.docs.wide img{aspect-ratio:16/10;object-position:center}
.wide-figure.plain img{background:none;max-height:85vh}
video.portrait{max-height:72vh;width:auto;max-width:100%;background:#000;border-radius:2px}
.cards{gap:22px}
.cards .item{background:var(--card);padding:22px 24px;border-radius:2px;border-top:2px solid var(--rule);transition:border-color .4s var(--ease)}
.cards .item:hover{border-top-color:var(--accent)}
.cards .item h3{font:500 21px/1.25 var(--serif);margin:.35em 0 .3em}
.cards .item p{margin:0;font-size:16px}
.characters{align-items:start}

/* lightbox */
.lightbox{position:fixed;inset:0;z-index:60;background:rgba(23,32,27,.86);display:grid;place-items:center;padding:4vmin;animation:fade .3s var(--ease)}
.lightbox figure{max-width:min(1100px,92vw);text-align:center}
.lightbox img{max-height:80vh;width:auto;margin:auto;animation:rise .45s var(--ease)}
.lightbox p{color:#e9e4dc;font:400 15px/1.5 var(--sans)}
.lightbox button{position:absolute;top:16px;right:18px;font:500 14px/1 var(--sans);color:#fff;background:none;border:1px solid rgba(255,255,255,.5);padding:9px 13px;border-radius:2px;cursor:pointer}

/* pager */
.pager{display:grid;grid-template-columns:1fr 1fr;gap:22px;padding:28px 0 64px;border-top:1px solid var(--rule)}
.pager a{display:grid;grid-template-columns:auto 1fr;column-gap:14px;align-items:baseline;padding:22px 24px;
  background:var(--card);color:var(--ink);text-decoration:none;border-radius:2px;transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.pager a:hover{transform:translateY(-3px);box-shadow:0 14px 30px -18px rgba(23,32,27,.45)}
.pager .label{grid-column:1/-1;margin-bottom:8px}
.pager .num{font:italic 300 34px/1 var(--serif);color:var(--stone)}
.pager .t{font:500 20px/1.2 var(--serif)}
.pager-next{text-align:right;grid-template-columns:1fr auto !important}
.pager-next .num{order:2}
@media (max-width:600px){.pager{grid-template-columns:1fr}}

/* model-viewer */
model-viewer{width:100%;height:min(70vh,560px);background:var(--card);border-radius:2px;--poster-color:transparent}

/* ── loading cover for heavy embeds ────────────────────────────────────
   Everything about its look is a variable, so any embed can restyle its own cover:
   <div class="embed" style="--embed-accent:#e0a526; --embed-aspect:4/3"> */
.embed{--embed-bg:#121417;--embed-ink:#f3efe9;--embed-accent:#7fb9a4;--embed-aspect:16/10;
  --embed-radius:3px;--embed-dim:.55;--embed-blur:2px;
  position:relative;aspect-ratio:var(--embed-aspect);background:var(--embed-bg);border-radius:var(--embed-radius);overflow:hidden;color:var(--embed-ink)}
.embed-poster{position:absolute;inset:0;pointer-events:none;width:100%;height:100%;object-fit:cover;transition:filter .6s var(--ease),opacity .8s var(--ease)}
.embed[data-state="idle"] .embed-poster,.embed[data-state="failed"] .embed-poster{filter:brightness(var(--embed-dim)) blur(var(--embed-blur))}
.embed[data-state="loading"] .embed-poster{filter:brightness(calc(var(--embed-dim) * .7)) blur(calc(var(--embed-blur) * 3))}
.embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0;opacity:0;transition:opacity .9s var(--ease)}
.embed[data-state="ready"] iframe{opacity:1;z-index:2}
.embed[data-state="ready"] .embed-poster{opacity:0}
.embed-cover{all:unset;position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:14px;
  cursor:pointer;text-align:center;padding:24px;transition:opacity .6s var(--ease)}
.embed-cover:focus-visible{outline:2px solid var(--embed-accent);outline-offset:-6px}
.embed[data-state="ready"] .embed-cover{opacity:0;pointer-events:none}
.embed[data-state="loading"] .embed-cover{cursor:progress}
.embed-label{font:500 clamp(17px,1.7vw,21px)/1.3 var(--sans);letter-spacing:.01em}
.embed-note{font:400 13px/1.4 var(--sans);opacity:.75}
/* the icon: a play ring when idle, a spinning arc while loading, a ↻ after a failure */
.embed-icon{width:68px;height:68px;border-radius:50%;border:1.5px solid color-mix(in srgb,var(--embed-ink) 70%,transparent);
  display:grid;place-items:center;transition:transform .5s var(--ease),border-color .3s}
.embed-icon::before{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--embed-ink)}
.embed-cover:hover .embed-icon{transform:scale(1.07);border-color:var(--embed-accent)}
.embed[data-state="loading"] .embed-icon{border-color:color-mix(in srgb,var(--embed-ink) 18%,transparent);
  border-top-color:var(--embed-accent);animation:spin 1s linear infinite}
.embed[data-state="loading"] .embed-icon::before{display:none}
.embed[data-state="failed"] .embed-icon::before{content:"↻";border:0;margin:0;font:400 30px/1 var(--sans);color:var(--embed-ink);width:auto;height:auto}
.embed-fallback{position:absolute;inset:0;display:grid;place-items:center;color:var(--embed-ink);font:500 18px/1 var(--sans)}
.embed-foot{margin-top:10px !important;font:500 13px/1 var(--sans);text-align:right}
@keyframes spin{to{transform:rotate(1turn)}}

/* ── motion ────────────────────────────────────────────────────────── */
/* Drift-in: site.js marks these .reveal and adds .is-in as each scrolls into view.
   Hidden only when scripts run (.js), so the page never goes blank without them. */
.js :is(.intro>*,.tiles>li,.about>*,.chapter-head>.chapter-text,.chapter-body>:not([data-cover]),.chapter-body .split>*,.chapter-body .grid>*,
  .chapter-body .gallery>*,.chapter-body .drawer>*,.chapter-body .calls>*,.chapter-body .loops>*,.chapter-body .compare>*,.pager>a):not(.is-in){
  opacity:0;transform:translateY(var(--reveal-rise))}
.reveal{transition:opacity var(--reveal-time) var(--ease),transform var(--reveal-time) var(--ease);
  transition-delay:var(--reveal-delay,0ms)}
.no-reveal :is(.intro>*,.tiles>li,.about>*,.chapter-head>.chapter-text,.chapter-body>:not([data-cover]),.chapter-body .split>*,.chapter-body .grid>*,
  .chapter-body .gallery>*,.chapter-body .drawer>*,.chapter-body .calls>*,.chapter-body .loops>*,.chapter-body .compare>*,.pager>a){opacity:1 !important;transform:none !important}

/* Page changes: the index stays still, the page cross-fades, and the chapter's picture
   travels from its tile into place (browsers that support it; others just change page). */
@view-transition{navigation:auto}
/* A tile is where the picture lands when you come back home, so it cannot be faded out then. */
:root:active-view-transition .tiles>li{opacity:1;transform:none}
::view-transition-old(root){animation:var(--page-fade) var(--ease) both fade-out}
::view-transition-new(root){animation:var(--page-fade) var(--ease) both fade-in}
::view-transition-group(*){animation-duration:.6s;animation-timing-function:var(--ease)}
[data-cover="kit"]{view-transition-name:cover-kit}
[data-cover="scans"]{view-transition-name:cover-scans}
[data-cover="classes"]{view-transition-name:cover-classes}
[data-cover="systems"]{view-transition-name:cover-systems}
[data-cover="illustration"]{view-transition-name:cover-illustration}
[data-cover="accents"]{view-transition-name:cover-accents}
[data-cover="motion"]{view-transition-name:cover-motion}
[data-cover="freddi"]{view-transition-name:cover-freddi}
[data-cover="events"]{view-transition-name:cover-events}
@keyframes fade-out{to{opacity:0}}
@keyframes fade-in{from{opacity:0}}
@keyframes fade{from{opacity:0}}
@keyframes rise{from{opacity:0;transform:translateY(12px) scale(.985)}}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;transition-duration:.01ms !important;transition-delay:0s !important}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important}
  .js :is(.intro>*,.tiles>li,.about>*,.chapter-head>.chapter-text,.chapter-body>:not([data-cover]),.chapter-body .split>*,.chapter-body .grid>*,
    .chapter-body .gallery>*,.chapter-body .drawer>*,.chapter-body .calls>*,.chapter-body .loops>*,.chapter-body .compare>*,.pager>a){opacity:1;transform:none}
}