@property --px{syntax:'<percentage>';inherits:false;initial-value:50%}
@property --py{syntax:'<percentage>';inherits:false;initial-value:6%}

@font-face{font-family:Geist;src:url("/site/geist.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}

:root{
  --plaster:#F1EFE9;
  --plaster-deep:#E6E3DA;
  --ink:#1A1815;
  --ink-2:#615C54;
  --ink-3:#9B948A;
  --rule:rgba(26,24,21,.10);
  --shadow:45,38,28;
  --serif:"Newsreader",Georgia,serif;
  --sans:Geist,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --measure:38rem;
  --iris:conic-gradient(from 205deg,#8FA8E8,#B49BE0,#E39BB8,#E0B78F,#8FCBB6,#8FA8E8);
  --cell:42px;
  --edge:378px;  /* 9 raster rows of dissolve, keep in step with --cell */
  --ground:#0B0A09;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;background:#090807;overflow-x:clip}
body{
  margin:0;overflow-x:clip;
  min-height:100%;
  color:var(--ink);
  font-family:var(--serif);
  background:linear-gradient(177deg,#F6F4EE 0%,var(--plaster) 38%,var(--plaster-deep) 100%);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* the lit surface */
.light{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(58% 42% at 50% -4%,rgba(255,255,255,.9),rgba(255,255,255,0) 72%),
    radial-gradient(42% 32% at 84% 20%,rgba(255,252,242,.6),rgba(255,255,255,0) 72%),
    radial-gradient(52% 40% at 8% 64%,rgba(214,209,196,.45),rgba(255,255,255,0) 74%);
}
/* paper grain */
body::after{
  content:"";position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.34;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.page{position:relative;z-index:1;max-width:58rem;margin:0 auto;padding:clamp(5.5rem,11vw,10rem) clamp(1.25rem,5vw,2.5rem) calc(15rem - var(--cell) * 2)}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── title page ─────────────────────────────── */
.plate{position:relative;text-align:center;padding-bottom:clamp(3.5rem,7vw,6rem)}
.portrait{width:74px;height:74px;border-radius:50%;object-fit:cover;display:block;margin:0 auto 2.1rem;
  box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 0 2px rgba(var(--shadow),.07),0 14px 26px -16px rgba(var(--shadow),.42)}
.kicker{margin:0 0 1rem;font-family:var(--serif);font-style:italic;font-size:.95rem;color:var(--ink-3);letter-spacing:.01em}
.plate h1{
  position:relative;
  margin:0;max-width:11ch;margin-inline:auto;
  font-family:var(--serif);font-weight:300;
  font-size:clamp(2.9rem,7.6vw,5.1rem);line-height:.98;letter-spacing:-.025em;
  font-variation-settings:"opsz" 72;
  text-shadow:0 1px 0 rgba(255,255,255,.75);
}
.plate h1 .w{display:inline-block;white-space:nowrap}
.plate h1 .ch{display:inline-block}

/* the raw render sits inside the heading, so it travels with the real type */
.plate__render{position:absolute;z-index:1;pointer-events:none}
body.staging .plate h1 .ch{opacity:0}
body.staging .portrait,
body.staging .role,
body.staging .dock,
body.staging .plate + .band{opacity:0}
body.ready .portrait{animation:riseIn .85s cubic-bezier(.2,.75,.2,1) .06s backwards}
body.ready .role{animation:riseIn .85s cubic-bezier(.2,.75,.2,1) .2s backwards}
body.ready .plate + .band{animation:riseIn .95s cubic-bezier(.2,.75,.2,1) .34s backwards}
body.ready .dock{animation:riseIn 1s cubic-bezier(.2,.75,.2,1) .42s backwards}
@keyframes riseIn{
  from{opacity:0;transform:translateY(28px) scale(.97);filter:blur(10px)}
  55%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}}
/* on the inner pages the list arrives thing by thing instead of as one block */
body.ready .page--sub .plate + .band{animation:none}
body.ready .page--sub .plate + .band :is(.piece,.paper,.object){
  animation:riseIn 1.05s cubic-bezier(.2,.75,.2,1) backwards;animation-delay:calc(.3s + var(--n, 0) * 85ms)}
.role{min-height:3em;line-height:1.5;margin:1.7rem 0 0;font-family:var(--serif);font-weight:300;
  font-size:clamp(1.05rem,1.9vw,1.4rem);color:var(--ink-2);letter-spacing:.005em;
  font-variation-settings:"opsz" 20}
@keyframes letterIn{from{opacity:0;filter:blur(10px);transform:translateY(.36em)}
  to{opacity:1;filter:blur(0);transform:none}}

/* ─── bands ──────────────────────────────────── */
.band{margin-top:clamp(3.6rem,7.5vw,6rem)}
.band__head{display:flex;justify-content:space-between;align-items:baseline;gap:2.5rem;flex-wrap:wrap}
.band h2{
  margin:0;font-family:var(--serif);font-weight:400;
  font-size:clamp(1.55rem,2.7vw,2.1rem);line-height:1.1;letter-spacing:-.015em;
  font-variation-settings:"opsz" 36;
  text-shadow:0 1px 0 rgba(255,255,255,.7);
}
.sub{margin:0;font-family:var(--sans);font-size:.8rem;color:var(--ink-2);max-width:21rem;line-height:1.55;text-align:right;flex:0 1 auto}

.prose{margin-top:1.4rem;max-width:var(--measure)}
.prose p{margin:0 0 1.05rem;font-size:1.06rem;line-height:1.74;color:#35312B;font-variation-settings:"opsz" 16}
.prose p:last-child{margin-bottom:0}
.prose em{font-style:italic;color:var(--ink)}
.prose a{color:var(--ink);text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:3px;text-decoration-color:rgba(26,24,21,.3);transition:text-decoration-color .3s}
.prose a:hover{text-decoration-color:var(--ink)}

/* ─── things standing on the surface ─────────── */
.shelf{
  display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:auto auto;
  gap:.9rem clamp(1.1rem,2.8vw,2.1rem);
  margin-top:clamp(1.8rem,3.5vw,2.6rem);
}
.piece,.object{display:grid;grid-row:span 2;grid-template-rows:subgrid;
  text-decoration:none;color:inherit;min-width:0}
.piece__label{align-self:start;display:block}
.piece__stand{position:relative;display:block;align-self:end;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.piece__face{position:relative;z-index:1;display:block;width:100%;height:auto;border-radius:2px 4px 4px 2px;
  box-shadow:0 1px 1px rgba(var(--shadow),.20),0 10px 16px -10px rgba(var(--shadow),.34),0 28px 42px -26px rgba(var(--shadow),.32);
  transition:box-shadow .55s cubic-bezier(.2,.8,.2,1)}
/* colour the object pools onto the surface beneath it */
.piece__bloom{position:absolute;z-index:0;left:0;bottom:0;width:100%;height:auto;
  filter:blur(30px) saturate(1.4);opacity:.34;transform:translateY(7%) scale(.96);
  transition:opacity .55s ease}
.piece__stand::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:2px 4px 4px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.24) 0,rgba(0,0,0,.06) 1.6%,rgba(255,255,255,.16) 3.6%,rgba(255,255,255,0) 8%)}
.piece__name{display:block;font-family:var(--sans);font-size:.8rem;font-weight:500;color:var(--ink);line-height:1.35}
.piece__note{display:block;margin-top:.2rem;font-family:var(--sans);font-size:.74rem;color:var(--ink-3);line-height:1.45}

.piece:hover .piece__stand{transform:translateY(-7px)}
.piece:hover .piece__face{box-shadow:0 1px 1px rgba(var(--shadow),.18),0 18px 26px -12px rgba(var(--shadow),.36),0 40px 56px -30px rgba(var(--shadow),.34)}
.piece:hover .piece__bloom{opacity:.42}

/* every thing catches the light as it lifts: a broad, faint sheen that
   travels across the surface, clipped to the object's own silhouette */
.piece__stand::before,.object__stand::before{content:"";position:absolute;inset:0;z-index:3;
  pointer-events:none;opacity:0;
  background:linear-gradient(104deg,
    rgba(255,255,255,0) 16%,
    rgba(255,255,255,.17) 40%,
    rgba(255,255,255,.04) 50%,
    rgba(255,255,255,.12) 61%,
    rgba(255,255,255,0) 84%) no-repeat;
  background-size:220% 100%;background-position:100% 0;
  transition:opacity .5s ease,background-position 1.1s cubic-bezier(.2,.8,.2,1),
    transform .55s cubic-bezier(.2,.8,.2,1)}
.piece__stand::before{border-radius:2px 4px 4px 2px}
.object__stand::before{
  -webkit-mask:var(--cut) center bottom/contain no-repeat;mask:var(--cut) center bottom/contain no-repeat}
.piece:hover .piece__stand::before,.object:hover .object__stand::before{opacity:1;background-position:18% 0}
.object:hover .object__stand::before{transform:translateY(-7px)}

/* cut-out objects */
.object__stand{position:relative;display:flex;align-items:flex-end;justify-content:center;
  height:clamp(104px,14vw,158px);align-self:end}
.object__face{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  filter:drop-shadow(0 14px 14px rgba(var(--shadow),.20)) drop-shadow(0 2px 2px rgba(var(--shadow),.14));
  transition:transform .55s cubic-bezier(.2,.8,.2,1),filter .55s cubic-bezier(.2,.8,.2,1)}
.object:hover .object__face{transform:translateY(-7px);
  filter:drop-shadow(0 24px 22px rgba(var(--shadow),.22)) drop-shadow(0 3px 3px rgba(var(--shadow),.15)) brightness(1.035)}

/* ─── the tray ───────────────────────────────── */
.tray{margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.tray__glass{display:grid;grid-template-columns:repeat(11,1fr);gap:clamp(.5rem,1.3vw,.95rem);
  padding:clamp(.85rem,1.8vw,1.35rem);border-radius:28px;
  border:1px solid rgba(255,255,255,.85);
  background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.44));
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),inset 0 -1px 0 rgba(var(--shadow),.05),0 1px 2px rgba(var(--shadow),.07),0 22px 38px -22px rgba(var(--shadow),.34)}
.app{position:relative;display:block}
.tray__tip{position:absolute;bottom:calc(100% + 12px);left:0;translate:-50% 0;white-space:nowrap;
  font-family:var(--sans);font-size:.68rem;color:#F3F1EA;padding:.28rem .55rem;border-radius:9px;
  border:1px solid rgba(255,255,255,.14);background:rgba(10,9,8,.88);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  box-shadow:0 12px 26px -12px rgba(0,0,0,.95);
  opacity:0;transform:translateY(4px);pointer-events:none;z-index:2;
  transition:opacity .22s ease,transform .22s cubic-bezier(.2,.8,.2,1),left .28s cubic-bezier(.2,.8,.2,1)}
.tray__glass.naming .tray__tip{opacity:1;transform:none}
.app img{display:block;width:100%;height:auto;border-radius:23%;
  filter:drop-shadow(0 4px 6px rgba(var(--shadow),.18));
  transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.app:hover img{transform:translateY(-5px) scale(1.04)}

/* ─── ledger ─────────────────────────────────── */
.ledger{display:flex;justify-content:space-between;align-items:baseline;
  margin:clamp(1.8rem,3.5vw,2.4rem) 0 0;padding-top:.85rem;border-top:1px solid var(--rule);
  font-family:var(--sans);font-size:.76rem;color:var(--ink-3)}
.ledger a{color:var(--ink-2);text-decoration:none;transition:color .3s}
.ledger a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ─── the screen ─────────────────────────────── */
.band--stack{position:relative;padding-top:calc(var(--edge) + var(--cell) * 3 + clamp(5.5rem,11vw,9rem));color:#F0EEE7}
.screen{position:absolute;left:50%;translate:-50% 0;width:100vw;top:0;bottom:-18rem;z-index:-1;
  overflow:hidden;
  background:
    radial-gradient(68% 300px at 50% calc(var(--edge) + 300px),rgba(126,155,235,.11),transparent 72%),
    linear-gradient(to bottom,transparent var(--edge),var(--ground) var(--edge),#080707 100%)}
.screen__edge{position:absolute;left:0;top:0;width:100%;height:calc(var(--edge) + var(--cell) * 3)}
/* the same lattice, drawn in ink while the ground is still paper */
.screen__ink{position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(26,24,21,.07) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(26,24,21,.07) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 120px,#000 var(--edge),transparent var(--edge));
  mask-image:linear-gradient(to bottom,transparent 0,#000 120px,#000 var(--edge),transparent var(--edge))}
.screen::before{content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.055) 1px,transparent 1px);
  background-size:var(--cell) var(--cell);
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--edge),#000 var(--edge),#000 calc(100% - 340px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent var(--edge),#000 var(--edge),#000 calc(100% - 340px),transparent 100%)}
.screen::after{content:"";position:absolute;inset:0;opacity:.5;
  background:repeating-linear-gradient(to bottom,rgba(255,255,255,.035) 0 1px,transparent 1px 3px);
  -webkit-mask-image:linear-gradient(to bottom,transparent var(--edge),#000 var(--edge),#000 calc(100% - 340px),transparent 100%);
  mask-image:linear-gradient(to bottom,transparent var(--edge),#000 var(--edge),#000 calc(100% - 340px),transparent 100%)}
.screen__pulse{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 300px),transparent 100%);
  mask-image:linear-gradient(to bottom,#000 0,#000 calc(100% - 300px),transparent 100%)}

.band--stack h2{color:#F3F1EA;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.band--stack .ledger{border-top-color:rgba(255,255,255,.14);color:rgba(240,238,231,.45)}
.band--stack .ledger a{color:rgba(240,238,231,.72)}
.band--stack .ledger a:hover{color:#fff}

.sign{display:flex;justify-content:center;margin-top:calc(var(--cell) * 3);color:#F3F1EA}
.sign__mark{width:clamp(210px,30vw,380px);height:auto;opacity:.7;
  transition:opacity .5s ease}
.sign__mark:hover{opacity:.9}

/* ─── liquid glass ───────────────────────────── */
.dock__glass,.tray__glass,.model__list,.model__trigger{position:relative;isolation:isolate}
.dock__glass,.tray__glass,.model__list{transition:--px .5s ease-out,--py .5s ease-out}
.dock__glass::before,.tray__glass::before,.model__list::before{content:"";position:absolute;inset:0;z-index:-1;
  border-radius:inherit;pointer-events:none;opacity:.8;filter:blur(24px);
  background:radial-gradient(220px 130px at var(--px) var(--py),
    rgba(255,255,255,.62),rgba(255,255,255,.3) 38%,rgba(255,255,255,.1) 62%,transparent 82%)}
.dock__glass::after,.tray__glass::after,.model__list::after{content:"";position:absolute;inset:0;padding:1px;
  border-radius:inherit;pointer-events:none;opacity:.42;background:var(--iris);filter:blur(.4px);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude}

/* glass, on the dark side */
.band--stack .tray__glass,.model__trigger,.model__list{
  border-color:rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.05));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),inset 0 -1px 0 rgba(0,0,0,.2),0 30px 60px -30px rgba(0,0,0,.85)}
.band--stack .tray__glass::before,.model__list::before{
  background:radial-gradient(170px 85px at var(--px,50%) var(--py,0%),rgba(255,255,255,.34),transparent 70%)}

/* ─── model picker ───────────────────────────── */
.model{position:relative}
.model__trigger{display:inline-flex;align-items:center;gap:.6rem;padding:.42rem .8rem .42rem .45rem;
  border-radius:14px;border-style:solid;border-width:1px;cursor:pointer;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  font-family:var(--sans);font-size:.8rem;color:#F3F1EA;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),filter .3s}
.model__trigger:hover{transform:translateY(-1px);filter:brightness(1.14)}
.model__trigger img{width:24px;height:24px;border-radius:7px;
  box-shadow:0 2px 6px rgba(0,0,0,.45);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.model__trigger:hover img{transform:scale(1.06)}
.model__trigger .chev{opacity:.5;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.model[open] .model__trigger .chev{transform:rotate(180deg)}
.model__list{transform-origin:100% 100%}

.model__list[hidden]{display:none}
.model__list{position:absolute;right:0;bottom:calc(100% + .6rem);z-index:6;width:20rem;
  display:flex;flex-direction:column;gap:2px;padding:.45rem;border-radius:22px;
  border-style:solid;border-width:1px;
  -webkit-backdrop-filter:blur(20px) saturate(1.5);backdrop-filter:blur(20px) saturate(1.5);
  animation:listIn .34s cubic-bezier(.2,.8,.2,1)}
/* the highlight is sized for the wide tray, so it is scaled back on a small panel */
.model__list::before{opacity:.4}
@keyframes listIn{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}}
.model__list button{position:relative;display:grid;grid-template-columns:30px 1fr 16px;align-items:center;
  gap:.72rem;padding:.55rem .6rem;border:0;border-radius:14px;background:none;cursor:pointer;text-align:left;
  font-family:var(--sans);animation:rowIn .4s cubic-bezier(.2,.8,.2,1) backwards;
  transition:background .22s ease}
@keyframes rowIn{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:none}}
.model__list button:nth-child(1){animation-delay:.04s}
.model__list button:nth-child(2){animation-delay:.08s}
.model__list button:nth-child(3){animation-delay:.12s}
.model__list button:nth-child(4){animation-delay:.16s}
.model__list button:nth-child(5){animation-delay:.2s}
.model__list button:hover{background:rgba(255,255,255,.13)}
.model__list button[aria-selected=true]{background:rgba(255,255,255,.09)}
.model__list img{width:30px;height:30px;border-radius:9px;box-shadow:0 2px 7px rgba(0,0,0,.45)}
.model__row{display:flex;flex-direction:column;gap:1px;min-width:0}
.model__name{font-size:.82rem;color:#F5F3EC;line-height:1.25}
.model__maker{font-size:.68rem;color:rgba(240,238,231,.42);line-height:1.25}
.model__tick{opacity:0;color:#8FCBB6;transition:opacity .25s ease}
.model__list button[aria-selected=true] .model__tick{opacity:1}

/* ─── the foot of the screen dissolves ───────── */
.fade{position:fixed;left:0;right:0;bottom:0;height:26vh;z-index:7;pointer-events:none}
.fade>div{position:absolute;inset:0}
.fade>div:nth-child(1){-webkit-backdrop-filter:blur(1.5px);backdrop-filter:blur(1.5px);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 28%,transparent 56%);mask-image:linear-gradient(to top,#000 0,#000 28%,transparent 56%)}
.fade>div:nth-child(2){-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 15%,transparent 34%);mask-image:linear-gradient(to top,#000 0,#000 15%,transparent 34%)}
.fade>div:nth-child(3){-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  -webkit-mask-image:linear-gradient(to top,#000 0,#000 6%,transparent 16%);mask-image:linear-gradient(to top,#000 0,#000 6%,transparent 16%)}
.fade>div:nth-child(4),.fade>div:nth-child(5){display:none}
.fade>div:nth-child(6){background:linear-gradient(to top,rgba(238,235,228,.88) 0,rgba(238,235,228,.4) 42%,rgba(238,235,228,0) 100%);
  transition:opacity .5s ease}
.fade>div:nth-child(7){opacity:0;transition:opacity .5s ease;
  background:linear-gradient(to top,rgba(10,9,8,.8) 0,rgba(10,9,8,.34) 42%,rgba(10,9,8,0) 100%)}
body.onscreen .fade>div:nth-child(6){opacity:0}
body.onscreen .fade>div:nth-child(7){opacity:1}

/* ─── dock ───────────────────────────────────── */
.dock{position:fixed;left:0;right:0;bottom:clamp(1rem,2.5vw,1.6rem);z-index:8;
  display:flex;justify-content:center;padding:0 .8rem;pointer-events:none}
.dock__glass{pointer-events:auto;flex:none;display:flex;align-items:center;gap:.15rem;padding:.4rem .55rem;border-radius:999px;
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.86),rgba(255,255,255,.58));
  -webkit-backdrop-filter:blur(22px) saturate(1.6);backdrop-filter:blur(22px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,1),0 1px 2px rgba(var(--shadow),.08),0 18px 32px -18px rgba(var(--shadow),.38)}
.dock__glass{gap:.2rem;padding:.32rem}
.dock a{position:relative;display:flex;flex:none;min-width:max-content;align-items:center;gap:.45rem;padding:.46rem .72rem;
  border-radius:999px;color:var(--ink-2);text-decoration:none;
  transition:color .3s,background .3s,transform .35s cubic-bezier(.2,.8,.2,1)}
.dock a>svg,.dock__label{position:relative;z-index:1}
.dock__label{font-family:var(--sans);font-size:.74rem;letter-spacing:.005em;white-space:nowrap}
.dock a::before{content:"";position:absolute;inset:-6px;border-radius:999px;opacity:0;filter:blur(9px);
  background:radial-gradient(closest-side,var(--glow),transparent 76%);transition:opacity .35s}
.dock a:hover,.dock a:focus-visible,.dock a.is-here{color:var(--ink);transform:translateY(-2px)}
.dock a:hover::before,.dock a:focus-visible::before,.dock a.is-here::before{opacity:1}
.dock a:hover>svg,.dock a.is-here>svg{color:var(--tint)}
.dock a:nth-child(1){--glow:#8FA8E8;--tint:#5C79C9}
.dock a:nth-child(2){--glow:#B49BE0;--tint:#8B6FC4}
.dock a:nth-child(3){--glow:#E39BB8;--tint:#C96F92}
.dock a:nth-child(4){--glow:#E0B78F;--tint:#C08F53}
.dock a:nth-child(5){--glow:#8FCBB6;--tint:#4FA189}
.dock a:nth-child(6){--glow:#A9C3E8;--tint:#6D8FBF}

/* the dock turns with the ground under it */
body.onscreen .dock__glass{border-color:rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.06));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 24px 44px -24px rgba(0,0,0,.9)}
body.onscreen .dock a{color:rgba(240,238,231,.6)}
body.onscreen .dock a:hover,body.onscreen .dock a.is-here{color:#fff}
.dock__glass,.dock a{transition:background .5s ease,border-color .5s ease,color .4s ease,
  box-shadow .5s ease,transform .35s cubic-bezier(.2,.8,.2,1)}

/* ─── quality floor ──────────────────────────── */
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}



@media (max-width:980px){
  .tray__glass{grid-template-columns:repeat(8,1fr)}
  .tray__glass .app:not(.app--more):nth-child(n+16){display:none}
}
@media (max-width:760px){
  .band__head{display:block}
  .sub{text-align:left;max-width:none;margin-top:.55rem}
  .model{margin-top:.9rem}
  .model__list{right:auto;left:0}
}
@media (max-width:560px){
  :root{--cell:30px;--edge:270px}
  /* the tray closes off: fewer keys, so no row is left half empty */
  .tray__glass .app:not(.app--more):nth-child(n+15){display:none}
  .tray__glass{grid-template-columns:repeat(5,1fr);border-radius:22px}
  /* only the place you are keeps its name */
  .dock a{padding:.46rem .56rem}
  .dock a:not(.is-here) .dock__label{display:none}
}
@media (max-width:640px){
  .shelf{grid-template-columns:repeat(2,1fr);gap:1.6rem 1.3rem}
  .plate h1{max-width:none}
  .tray__glass{padding:.7rem .8rem}
  .dock a{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* ─── inner pages ────────────────────────────── */
.role--lede{max-width:30rem;margin-inline:auto;text-wrap:balance}
/* inner titles are two words, one per line, like the name on the home page */
.page--sub .plate h1{max-width:9ch}
.portrait--mark{display:grid;place-items:center;color:#F1EFE9;
  background:radial-gradient(120% 120% at 30% 20%,#2A2723,#0B0A09 70%)}

/* the books stand bigger, with room to breathe between the rows */
.shelf--books{grid-template-rows:none;grid-auto-rows:auto;gap:1rem clamp(1.6rem,4vw,3.2rem)}
.shelf--books .piece__label{margin-bottom:clamp(2.6rem,5vw,4.2rem)}
.shelf--books .piece__name{font-size:.86rem}

/* the room takes on the cover's colour, far out of focus */
.aura{position:fixed;inset:-10vmax;z-index:0;pointer-events:none}
.aura i{position:absolute;inset:0;background:center/cover no-repeat;opacity:0;
  filter:blur(120px) saturate(1.5);transform:scale(1.1);
  transition:opacity 1.4s cubic-bezier(.2,.7,.2,1),transform 2.4s cubic-bezier(.2,.7,.2,1)}
.aura i.on{opacity:.2;transform:none}

/* a footer without the stack: straight from the dissolve into the signature */
.band--foot .sign{margin-top:0}
@media (prefers-reduced-motion:reduce){.aura{display:none}}

/* ─── a look into the book ───────────────────── */
.peek{position:absolute;right:-11px;bottom:-11px;z-index:4;display:grid;place-items:center;
  width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;color:var(--ink-2);
  border:1px solid rgba(255,255,255,.9);
  background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,.5));
  -webkit-backdrop-filter:blur(14px) saturate(1.5);backdrop-filter:blur(14px) saturate(1.5);
  box-shadow:inset 0 1px 0 #fff,0 1px 2px rgba(var(--shadow),.1),0 10px 20px -10px rgba(var(--shadow),.45);
  opacity:0;transform:scale(.86);
  transition:opacity .35s ease,transform .45s cubic-bezier(.2,.8,.2,1),color .3s}
.piece:hover .peek,.peek:focus-visible{opacity:1;transform:none}
.peek:hover{color:var(--ink)}
.peek:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
@media (hover:none){.peek{opacity:1;transform:none}}
.shelf--books .piece__stand{cursor:pointer}
.piece.is-lifted .piece__face,.piece.is-lifted .peek{visibility:hidden}
.piece.is-lifted .piece__stand::before,.piece.is-lifted .piece__stand::after{opacity:0}

.reader{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;
  margin:0;padding:0;border:0;background:transparent;overflow:hidden;color:var(--ink)}
.reader::backdrop{background:transparent}
.reader__veil{position:absolute;inset:0;background:rgba(241,239,233,.5);
  -webkit-backdrop-filter:blur(16px) saturate(1.15);backdrop-filter:blur(16px) saturate(1.15);
  opacity:0;transition:opacity .55s ease}
.reader.is-open .reader__veil{opacity:1}

/* the closed book is the size of the cover; the spine sits on its left edge */
.tome{position:absolute;left:calc(50% - var(--w) / 2);top:calc(50% - var(--h) / 2);
  width:var(--w);height:var(--h);transform-origin:0 0;perspective:2400px;
  transition:transform .72s cubic-bezier(.2,.8,.2,1)}
.tome__book{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.62,.02,.18,1)}
.reader.is-spread .tome__book{transform:translateX(var(--shift))}

.tome__page{position:absolute;inset:0;border-radius:1px 3px 3px 1px;overflow:hidden;
  padding:calc(var(--w) * .13) calc(var(--w) * .12) calc(var(--w) * .1) calc(var(--w) * .14);
  display:flex;flex-direction:column;
  background:linear-gradient(90deg,#EFE9DC 0,#FBF8F1 9%,#FCFAF4 60%,#F7F3EA 100%);
  box-shadow:1px 1px 0 #E6DFD0,2px 2px 0 #FAF6EE,3px 3px 0 #E3DCCC,4px 4px 0 #F6F1E7,5px 5px 0 #DDD5C4,
    0 30px 60px -28px rgba(var(--shadow),.55),0 12px 22px -14px rgba(var(--shadow),.35)}
/* the gutter, where the pages curve into the spine */
.tome__page::before{content:"";position:absolute;inset:0 auto 0 0;width:16%;pointer-events:none;
  background:linear-gradient(90deg,rgba(70,55,35,.2),rgba(70,55,35,.05) 45%,rgba(70,55,35,0))}
.tome__page::after,.tome__inside::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.28;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.tome__title{margin:0;font:italic 400 calc(var(--w) * .043)/1.3 var(--serif);color:var(--ink-3);
  font-variation-settings:"opsz" 14;opacity:0;transition:opacity .6s ease .15s}
.tome__note{margin:auto 0;font-family:"La Belle Aurore",cursive;font-size:calc(var(--w) * .072);
  line-height:1.5;color:#23304D;text-wrap:pretty}
.tome__note .word{display:inline-block;white-space:nowrap}
.tome__note .ch{opacity:0}
.tome__sign{align-self:flex-end;width:50%;height:auto;margin-top:calc(var(--w) * .02);color:#23304D}
.tome__sign path{stroke-dasharray:1;stroke-dashoffset:1}
.reader.is-written .tome__title{opacity:1}
.reader.is-written .tome__note .ch{animation:ink .55s ease forwards;animation-delay:calc(var(--i) * 24ms + .2s)}
.reader.is-written .tome__sign path{transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.3,1) var(--signed);stroke-dashoffset:0}
@keyframes ink{from{opacity:0;filter:blur(1.6px);transform:translateY(.06em)}to{opacity:1;filter:none;transform:none}}

.tome__cover{position:absolute;inset:0;transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1.1s cubic-bezier(.62,.02,.18,1)}
.reader.is-spread .tome__cover{transform:rotateY(-166deg)}
.tome__front,.tome__inside{position:absolute;inset:0;border-radius:1px 3px 3px 1px;overflow:hidden;
  -webkit-backface-visibility:hidden;backface-visibility:hidden}
.tome__front{background:center/100% 100% no-repeat var(--cover);
  box-shadow:0 1px 1px rgba(var(--shadow),.2),0 18px 26px -12px rgba(var(--shadow),.36)}
/* the spine fold, and the cover darkening as it turns away from the light */
.tome__front::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.24) 0,rgba(0,0,0,.06) 1.6%,rgba(255,255,255,.16) 3.6%,rgba(255,255,255,0) 8%)}
.tome__front::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,16,10,.1),rgba(20,16,10,.5));
  opacity:0;transition:opacity .9s ease}
.reader.is-spread .tome__front::after{opacity:1}
.tome__inside{transform:rotateY(180deg);background:#F2ECE0}
.tome__endpaper{position:absolute;inset:-20%;background:center/cover no-repeat var(--cover);
  filter:blur(26px) saturate(1.25);opacity:.32}
/* and the inside of the cover coming into the light as it lands */
.tome__inside::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(270deg,rgba(70,55,35,.26),rgba(70,55,35,.04) 16%,rgba(70,55,35,0) 30%),rgba(20,16,10,.4);
  transition:background-color 1.1s ease}
.reader.is-spread .tome__inside::before{background-color:rgba(20,16,10,0)}
.tome__plate{position:absolute;z-index:2;left:50%;top:50%;translate:-50% -50%;
  display:flex;flex-direction:column;align-items:center;gap:.35em;
  padding:1.1em 1.5em;border:1px solid rgba(26,24,21,.28);outline:1px solid rgba(26,24,21,.14);outline-offset:3px;
  font-family:var(--serif);font-size:calc(var(--w) * .042);color:rgba(26,24,21,.72);white-space:nowrap}
.tome__plate i{font-size:.9em;color:rgba(26,24,21,.55)}
.tome__plate b{font-weight:400;letter-spacing:.14em;text-transform:uppercase;font-size:.78em}

.reader__close{position:absolute;top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem);
  display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;color:var(--ink-2);
  border:1px solid rgba(255,255,255,.9);background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(255,255,255,.5));
  box-shadow:inset 0 1px 0 #fff,0 12px 24px -12px rgba(var(--shadow),.45);
  opacity:0;transition:opacity .4s ease,color .3s}
.reader.is-open .reader__close{opacity:1}
.reader__close:hover{color:var(--ink)}

@media (prefers-reduced-motion:reduce){
  .tome,.tome__book,.tome__cover,.reader__veil{transition-duration:.01s}
  .reader.is-written .tome__note .ch{animation-duration:.01s;animation-delay:0s}
}

/* the signature is written when it comes into view; without script it simply stands there */
.sign.will-sign .sign__mark path{stroke-dasharray:1;stroke-dashoffset:1}
.sign.is-signed .sign__mark path{stroke-dashoffset:0;transition:stroke-dashoffset 2.4s cubic-bezier(.45,.05,.25,1) .2s}

/* ─── papers: the first page on the surface, a note in the margin ─── */
.papers{display:grid;gap:clamp(4.5rem,9vw,7rem)}
.paper{display:grid;grid-template-columns:minmax(0,14.5rem) minmax(0,1fr);gap:clamp(2rem,5.5vw,4.5rem);align-items:center}
.paper__sheet{position:relative;display:block;z-index:0;transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.paper__sheet img{position:relative;z-index:2;display:block;width:100%;height:auto;border-radius:1px;
  box-shadow:0 1px 1px rgba(var(--shadow),.16),0 12px 18px -12px rgba(var(--shadow),.34),0 30px 44px -28px rgba(var(--shadow),.3);
  transition:box-shadow .55s cubic-bezier(.2,.8,.2,1)}
/* the pages underneath, which fan out a little when the top one is lifted */
.paper__sheet::before,.paper__sheet::after{content:"";position:absolute;inset:0;border-radius:1px;background:#FAF8F2;
  box-shadow:0 1px 1px rgba(var(--shadow),.12),0 10px 16px -12px rgba(var(--shadow),.26);
  transition:transform .6s cubic-bezier(.2,.8,.2,1)}
.paper__sheet::before{z-index:1;transform:translate(3px,3px) rotate(.6deg)}
.paper__sheet::after{z-index:0;transform:translate(6px,5px) rotate(1.3deg);background:#F4F1E9}
.paper:hover .paper__sheet{transform:translateY(-6px)}
.paper:hover .paper__sheet img{box-shadow:0 1px 1px rgba(var(--shadow),.14),0 20px 28px -14px rgba(var(--shadow),.36),0 44px 60px -32px rgba(var(--shadow),.32)}
.paper:hover .paper__sheet::before{transform:translate(-7px,6px) rotate(-2.2deg)}
.paper:hover .paper__sheet::after{transform:translate(11px,9px) rotate(3deg)}

.paper__title{margin:0;font-weight:400;font-size:clamp(1.5rem,2.7vw,2.05rem);line-height:1.12;letter-spacing:-.015em;
  font-variation-settings:"opsz" 48;text-wrap:balance}
.paper__title a{color:inherit;text-decoration:none}
.paper__title small{display:block;margin-top:.5rem;font-size:.55em;line-height:1.4;letter-spacing:0;color:var(--ink-2);
  font-variation-settings:"opsz" 16}
.paper__title a:hover{text-decoration:underline;text-decoration-thickness:from-font;text-underline-offset:4px;text-decoration-color:rgba(26,24,21,.3)}
/* a note in the margin, in the same ink as the books */
.paper__why,.rack__why{max-width:27rem;margin:1.5rem 0 0;font-family:"La Belle Aurore",cursive;font-size:clamp(1.12rem,1.8vw,1.36rem);
  line-height:1.55;color:#23304D;transform:rotate(-.6deg);transform-origin:0 50%}
.paper__foot{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem 1.2rem;margin:1.35rem 0 0;
  font:.74rem/1.3 var(--sans);color:var(--ink-3)}
.paper__doi{color:var(--ink-2);
  text-decoration:underline;text-decoration-color:rgba(26,24,21,.22);text-underline-offset:3px;transition:color .3s,text-decoration-color .3s}
.paper__doi:hover{color:var(--ink);text-decoration-color:var(--ink)}

/* handwriting that is written while you watch */
.ink .word{display:inline-block;white-space:nowrap}
.ink.will-write .ch{opacity:0}
.ink.is-written .ch{animation:ink .55s ease forwards;animation-delay:calc(var(--i) * 22ms + .15s)}

@media (max-width:640px){
  .paper{grid-template-columns:1fr;gap:1.8rem}
  .paper__sheet{width:min(13rem,62%)}
}

/* ─── favorite things: picked up and turned in the hand ─────────────── */
.shelf--things{grid-template-columns:repeat(4,1fr);grid-template-rows:none;grid-auto-rows:auto;gap:1rem clamp(1.4rem,3.4vw,2.8rem)}
.shelf--things .piece__label{margin-bottom:clamp(2.4rem,4.5vw,3.8rem)}
.shelf--things .object__stand{perspective:640px}
/* every thing gets the same visual mass, whatever its shape: the width comes
   from its trimmed proportions, worked out once per image */
.shelf--objects .object__stand{height:auto;aspect-ratio:10/9}
.shelf--objects .object__face{width:var(--w);max-width:none;max-height:none;height:auto}
.shelf--objects .object__stand::before{-webkit-mask-size:var(--w) auto;mask-size:var(--w) auto}
.shelf--things .object__face,.shelf--things .object__stand::before{
  transform:translateY(var(--lift,0px)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .6s cubic-bezier(.2,.8,.2,1),filter .6s cubic-bezier(.2,.8,.2,1),opacity .5s ease}
.shelf--things .object.is-held .object__face,.shelf--things .object.is-held .object__stand::before{transition-duration:.18s,.6s,.5s}
.shelf--things .object:hover{--lift:-9px}
.shelf--things .object:hover .object__face,.shelf--things .object:hover .object__stand::before{
  transform:translateY(var(--lift)) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg))}
.shelf--things .object:hover .object__face{
  filter:drop-shadow(var(--sx,0px) 26px 22px rgba(var(--shadow),.22)) drop-shadow(0 3px 3px rgba(var(--shadow),.15)) brightness(1.03)}
/* the light sits where the hand is, on the object's own surface */
.shelf--things .object__stand::before{background:radial-gradient(55% 45% at var(--lx,50%) var(--ly,28%),rgba(255,255,255,.42),rgba(255,255,255,0) 72%);
  background-size:100% 100%;mix-blend-mode:soft-light}
.shelf--things .object:hover .object__stand::before{background-position:0 0}
@media (max-width:760px){.shelf--things{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.shelf--things{grid-template-columns:repeat(2,1fr)}}

/* ─── favorite things: a cone of light, and a shadow in the thing's own colour ─── */
/* the light glides from thing to thing instead of blinking between them */
@property --spot-x{syntax:'<length>';inherits:false;initial-value:0px}
@property --spot-y{syntax:'<length>';inherits:false;initial-value:0px}
.spot{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:0;
  transition:opacity 1.1s ease,--spot-x .9s cubic-bezier(.22,.8,.22,1),--spot-y .9s cubic-bezier(.22,.8,.22,1);
  background:radial-gradient(circle at var(--spot-x) var(--spot-y),
    rgba(255,253,246,.46) 0,rgba(255,253,246,0) 170px,rgba(34,27,18,.03) 360px,rgba(34,27,18,.055) 100%)}
.spot.on{opacity:1}
.shelf--things .object__face{position:relative;z-index:1}
/* the shadow of the thing's own outline on the floor, soft and neutral;
   it only fades in, it does not grow */
.shelf--things .object__stand::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:var(--cut) center bottom/var(--w) auto no-repeat;
  transform:translateY(5%) scaleY(.12);transform-origin:50% 100%;
  filter:brightness(0) blur(11px);opacity:0;transition:opacity .7s ease}
.shelf--things .object:hover .object__stand::after{opacity:.3}
.shelf--things .object__stand:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:6px}
.shelf--things .object__stand{cursor:pointer}
.object.is-lifted .object__face,.object.is-lifted .object__stand::after,.object.is-lifted .object__stand::before{visibility:hidden}

/* ─── the closer look: the page becomes the screen ─── */
.vitrine{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;
  background:transparent;overflow:hidden;color:#F0EEE7;overscroll-behavior:contain}
.vitrine::backdrop{background:transparent}
.vitrine__screen,.vitrine__fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.vitrine__fx{z-index:3}
.vitrine__glass{position:absolute;inset:0;pointer-events:none;opacity:0;
  background:
    repeating-linear-gradient(to bottom,rgba(255,255,255,.03) 0 1px,transparent 1px 3px),
    radial-gradient(70% 60% at 50% 60%,rgba(126,155,235,.12),transparent 72%)}
.vitrine__stage{position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--w);height:var(--h);perspective:900px}
.vitrine__obj,.vitrine__glow,.vitrine__sheen{position:absolute;inset:0;width:100%;height:100%;opacity:0}
.vitrine__obj{object-fit:contain;
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,opacity .35s ease;
  filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
/* the thing lights the screen behind it in its own colours */
.vitrine__glow{object-fit:contain;transform:scale(1.25);filter:blur(56px) saturate(1.9) brightness(1.1);transition:opacity 1.2s ease}
.vitrine.is-shown .vitrine__obj{opacity:1}
.vitrine.is-shown .vitrine__glow{opacity:.5}
.vitrine__sheen{-webkit-mask:var(--cut) center/contain no-repeat;mask:var(--cut) center/contain no-repeat;
  background:radial-gradient(40% 36% at var(--lx,40%) var(--ly,30%),rgba(255,255,255,.32),rgba(255,255,255,0) 72%);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,opacity .6s ease;mix-blend-mode:screen}
.vitrine.is-shown .vitrine__sheen{opacity:1}

.vitrine__label{position:absolute;z-index:2;left:var(--lx0);top:var(--ly0);width:var(--lw);
  transform:translateY(var(--lshift,-50%));opacity:0;transition:opacity .7s ease}
.vitrine.is-shown .vitrine__label{opacity:1}
.vitrine__name{margin:0;font-family:var(--serif);font-weight:300;font-size:clamp(2rem,3.6vw,3rem);line-height:1.02;
  letter-spacing:-.02em;font-variation-settings:"opsz" 72;color:#F3F1EA}
.vitrine__note{margin:1.4rem 0 0;max-width:24rem;font-family:"La Belle Aurore",cursive;font-size:clamp(1.15rem,1.7vw,1.38rem);
  line-height:1.55;color:#E9E3D4;transform:rotate(-.6deg);transform-origin:0 50%}
.vitrine__close{position:absolute;z-index:4;top:clamp(1rem,3vw,1.8rem);right:clamp(1rem,3vw,1.8rem);
  display:grid;place-items:center;width:42px;height:42px;padding:0;border-radius:50%;cursor:pointer;color:rgba(240,238,231,.7);
  border:1px solid rgba(255,255,255,.2);background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.06));
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 20px 40px -20px rgba(0,0,0,.9);opacity:0;transition:opacity .5s ease,color .3s}
.vitrine.is-shown .vitrine__close{opacity:1}
.vitrine__close:hover{color:#fff}

/* ─── software stack: keys on the surface that light it in their colour ─── */
.band--rack+.band--rack{margin-top:clamp(4.2rem,8.5vw,6.5rem)}
.band--rack .rack__why{position:relative;z-index:1;margin-top:.8rem}
body.ready .page--sub .plate + .band--rack > :not(.rack){animation:riseIn .95s cubic-bezier(.2,.75,.2,1) .3s backwards}
.rack{position:relative;display:grid;grid-template-columns:repeat(6,1fr);gap:1.1rem clamp(1.1rem,2.6vw,2rem);
  margin-top:clamp(1.8rem,3.5vw,2.4rem)}
/* the glow runs out past the keys, onto the open surface around them */
.rack__glow{position:absolute;z-index:0;left:-140px;top:-140px;width:calc(100% + 280px);height:calc(100% + 280px);pointer-events:none}
.tool{position:relative;z-index:1;display:block;min-width:0;color:inherit;text-decoration:none}
.tool__key{position:relative;display:block;border-radius:23%;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.tool__face{display:block;width:100%;height:auto;aspect-ratio:1;border-radius:23%;
  box-shadow:0 1px 1px rgba(var(--shadow),.2),0 10px 16px -10px rgba(var(--shadow),.34),0 26px 38px -24px rgba(var(--shadow),.3);
  transition:box-shadow .55s cubic-bezier(.2,.8,.2,1)}
/* a lip of light along the top edge, like glass over the icon */
.tool__key::after{content:"";position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),inset 0 0 0 1px rgba(0,0,0,.05)}
.tool__key::before{content:"";position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;opacity:0;
  background:linear-gradient(104deg,rgba(255,255,255,0) 16%,rgba(255,255,255,.22) 40%,rgba(255,255,255,.05) 50%,
    rgba(255,255,255,.14) 61%,rgba(255,255,255,0) 84%) no-repeat;
  background-size:220% 100%;background-position:100% 0;
  transition:opacity .5s ease,background-position 1.1s cubic-bezier(.2,.8,.2,1)}
.tool .piece__label{margin-top:.9rem}
.tool:hover .tool__key,.tool:focus-visible .tool__key{transform:translateY(-7px)}
.tool:hover .tool__face,.tool:focus-visible .tool__face{
  box-shadow:0 1px 1px rgba(var(--shadow),.18),0 18px 24px -12px rgba(var(--shadow),.34),0 40px 54px -30px rgba(var(--shadow),.32)}
.tool:hover .tool__key::before,.tool:focus-visible .tool__key::before{opacity:1;background-position:18% 0}
.tool:focus-visible{outline:none}
.tool:focus-visible .tool__key{outline:2px solid var(--ink);outline-offset:5px}
/* it boots: the icon comes up out of coarse blocks */
.tool__boot{position:absolute;inset:0;z-index:1;width:100%;height:100%;border-radius:inherit;image-rendering:pixelated}
.tool.will-boot .tool__key{opacity:0}
.tool.is-booting .tool__key{opacity:1}
.tool.is-booting .tool__face{opacity:0}
.tool.will-boot .piece__label{opacity:0;transform:translateY(8px)}
.tool.is-booting .piece__label{opacity:1;transform:none;transition:opacity .7s ease .25s,transform .7s cubic-bezier(.2,.8,.2,1) .25s}
@media (max-width:760px){.rack{grid-template-columns:repeat(4,1fr)}}
@media (max-width:560px){.rack{grid-template-columns:repeat(3,1fr);gap:1rem 1.1rem}}

/* two papers on the home page, side by side */
.papers--pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(2rem,5vw,3.6rem);margin-top:clamp(1.8rem,3.5vw,2.6rem)}
.papers--pair .paper{grid-template-columns:minmax(0,9.5rem) minmax(0,1fr);gap:clamp(1.3rem,2.6vw,1.9rem);align-items:end}
.papers--pair .paper__title{font-size:clamp(1.15rem,1.7vw,1.35rem);line-height:1.18}
.papers--pair .paper__foot{margin-top:.9rem}
@media (max-width:760px){.papers--pair{grid-template-columns:1fr}}
@media (max-width:640px){.papers--pair .paper{grid-template-columns:minmax(0,8rem) minmax(0,1fr)}.papers--pair .paper__sheet{width:auto}}

/* on the home page the signature is also the way to reach me, for whoever tries it */
.sign__link{position:relative;display:block;color:inherit;text-decoration:none}
.sign__link:hover .sign__mark{opacity:.95}
.sign__hint{position:absolute;left:50%;top:100%;translate:-50% 0;white-space:nowrap;
  font:clamp(1.05rem,1.5vw,1.25rem)/1 "La Belle Aurore",cursive;color:#E9E3D4;
  opacity:0;transform:translateY(-4px) rotate(-2deg);filter:blur(3px);
  transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1),filter .6s ease}
.sign__link:hover .sign__hint,.sign__link:focus-visible .sign__hint{opacity:.8;transform:rotate(-2deg);filter:none}
.sign__link:focus-visible{outline:2px solid #F3F1EA;outline-offset:8px;border-radius:6px}

/* ─── quotes: lines set into the wall, surfacing through the raster ─── */
.quotes{display:grid;gap:clamp(6rem,15vw,11rem);margin-top:clamp(4rem,9vw,7rem);text-align:center}
.quote{margin:0}
.quote__text{margin:0 auto;max-width:17em;font-weight:300;font-size:clamp(1.85rem,4.1vw,3.05rem);line-height:1.14;
  letter-spacing:-.02em;font-variation-settings:"opsz" 60;text-wrap:balance;color:var(--ink);
  text-shadow:0 1px 0 rgba(255,255,255,.75)}
.quote__text p{margin:0}
/* the marks hang outside the measure, so the words themselves stay centred */
.quote__text p::before{content:"\201C";margin-left:-.45em;color:var(--ink-3)}
.quote__text p::after{content:"\201D";color:var(--ink-3)}
.quote__by{margin-top:1.6rem;font:.72rem/1.3 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
/* where the line comes from, small enough to stay quiet */
.quote__source{display:block;width:clamp(52px,6vw,72px);margin:0 auto clamp(1.5rem,3vw,2.2rem)}
.quote__source img{display:block;width:100%;height:auto;border-radius:1px 2px 2px 1px;
  box-shadow:0 1px 1px rgba(var(--shadow),.2),0 10px 16px -10px rgba(var(--shadow),.36);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
a.quote__source:hover img{transform:translateY(-4px);box-shadow:0 1px 1px rgba(var(--shadow),.18),0 18px 24px -12px rgba(var(--shadow),.4)}
.quote__source--empty{display:grid;place-items:center;height:clamp(76px,9vw,104px);border:1px dashed rgba(26,24,21,.22);
  border-radius:2px;font:.62rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.quote__meta{margin:.55rem 0 0;font:.76rem/1.4 var(--sans);letter-spacing:.02em;color:var(--ink-3)}
.quote.will-surface .quote__source,.quote.will-surface .quote__meta{opacity:0}
.quote.is-surfacing .quote__source,.quote.is-surfaced .quote__source,
.quote.is-surfacing .quote__meta,.quote.is-surfaced .quote__meta{opacity:1;transition:opacity .9s ease .5s}
.quote.will-surface .quote__text{opacity:0;transform:translateY(14px);filter:blur(6px)}
.quote.is-surfacing .quote__text,.quote.is-surfaced .quote__text{opacity:1;transform:none;filter:none;
  transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1),filter .9s ease}
.quote.will-surface .quote__by{opacity:0;transform:translateY(6px)}
.quote.is-surfacing .quote__by,.quote.is-surfaced .quote__by{opacity:1;transform:none;
  transition:opacity .9s ease .7s,transform .9s cubic-bezier(.2,.8,.2,1) .7s}

/* ─── 404: the number is made of cells, and they get out of the way ─── */
.page--lost{min-height:100svh;padding-top:clamp(3rem,7vw,5.5rem);padding-bottom:11rem}
.page--lost .plate{padding-bottom:0}
.lost__digits{display:block;width:min(100%,37rem);aspect-ratio:2.35;margin:0 auto clamp(1.5rem,4vw,2.6rem);touch-action:none}
.lost__note{margin:1.6rem 0 0;font:clamp(1.25rem,2vw,1.5rem)/1.4 "La Belle Aurore",cursive;color:#23304D;transform:rotate(-1.5deg)}
.lost__home{margin:2.4rem 0 0;font:.8rem/1 var(--sans)}
.lost__home a{color:var(--ink-2);text-decoration:underline;text-decoration-color:rgba(26,24,21,.25);text-underline-offset:4px;transition:color .3s,text-decoration-color .3s}
.lost__home a:hover{color:var(--ink);text-decoration-color:var(--ink)}
body.staging .lost__note,body.staging .lost__home{opacity:0}
body.ready .lost__home{animation:riseIn .85s cubic-bezier(.2,.75,.2,1) .5s backwards}
.lost__note.is-written .ch{animation-delay:calc(var(--i) * 40ms + 1.3s)}

/* the picked model lands with a small knock */
@keyframes picked{0%{transform:scale(1)}30%{transform:scale(.88)}62%{transform:scale(1.13)}100%{transform:scale(1)}}
.model__trigger.is-picked img{animation:picked .62s cubic-bezier(.2,.8,.2,1)}
/* the last key in the tray stands for the other thirty-one */
.app--more{grid-column:span 2;display:flex;align-items:center;justify-content:center;gap:.55rem;
  aspect-ratio:2.14;border-radius:11.5%/23%;text-decoration:none;color:rgba(240,238,231,.66);
  border:1px solid rgba(255,255,255,.2);
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.035));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 4px 10px -6px rgba(0,0,0,.8);
  transition:transform .4s cubic-bezier(.2,.8,.2,1),color .3s,background .3s,box-shadow .4s}
.app__more-label{font:.66rem/1 var(--sans);letter-spacing:.06em;white-space:nowrap}
.app--more svg{flex:none;transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.app--more:hover{color:#fff;transform:translateY(-5px);
  background:linear-gradient(180deg,rgba(255,255,255,.2),rgba(255,255,255,.07));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.34),0 14px 26px -12px rgba(0,0,0,.9)}
.app--more:hover svg{transform:translateX(4px)}
@media (max-width:560px){.app__more-label{display:none}.app--more{aspect-ratio:2.14}}

/* ─── projects: a folder lying on the surface, the cards inside it ──── */
.folder{position:relative;width:100%;height:clamp(18rem,27vw,21.5rem);
  margin:clamp(3.5rem,7vw,5.5rem) 0 clamp(2rem,4vw,3rem)}
.folder__back,.folder__front,.folder__tape{position:absolute;left:50%;translate:-50% 0}
.folder__back{bottom:0;width:min(92%,26rem);height:44%;border-radius:3px 3px 5px 5px;z-index:1;
  background:linear-gradient(180deg,#EFEBE2,#E3DED3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 1px 1px rgba(var(--shadow),.12)}
/* the front panel leans back a touch, so the cards sit in the pocket and not behind it */
.folder__front{bottom:0;width:min(92%,26rem);height:36%;z-index:5;border-radius:2px 2px 5px 5px;
  background:linear-gradient(180deg,#F2EEE5 0%,#E2DDD1 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 -8px 14px -10px rgba(var(--shadow),.5),
    0 20px 34px -18px rgba(var(--shadow),.42),0 48px 70px -44px rgba(var(--shadow),.34);
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
/* the label is taped across the middle of the front */
.folder__tape{bottom:15%;z-index:6;rotate:-1.4deg;padding:.45rem 3.4rem;
  font:.7rem/1 var(--sans);letter-spacing:.24em;text-transform:uppercase;color:#6A6459;
  background:linear-gradient(100deg,rgba(248,243,229,.66),rgba(241,235,217,.9) 42%,rgba(248,243,229,.64));
  box-shadow:0 1px 1px rgba(var(--shadow),.13),0 7px 12px -9px rgba(var(--shadow),.5);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 4px,#000 calc(100% - 4px),transparent 100%);
  transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.folder__fan{position:absolute;inset:0;z-index:3}

/* a card, lying in the folder: already a little spread out before anything happens */
.slip{position:absolute;left:50%;bottom:16%;z-index:calc(var(--i) + 1);width:min(38%,8.9rem);
  height:clamp(10.5rem,17vw,12.4rem);
  --spread:1;
  display:flex;flex-direction:column;gap:.18rem;padding:.8rem .85rem 1.05rem;text-align:left;
  text-decoration:none;color:inherit;cursor:default;border-radius:3px;
  background:linear-gradient(170deg,#FDFBF7,#F1EEE5);
  transform-origin:50% 50%;
  transform:translateX(calc(-50% + var(--cx) * var(--rest,1))) translateY(var(--cy)) rotate(calc(var(--cr) * var(--rest,1)));
  box-shadow:0 1px 1px rgba(var(--shadow),.16),0 12px 18px -14px rgba(var(--shadow),.45);
  transition:transform .8s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease}
/* the icon is taped to the card */
.slip__pin{position:relative;align-self:flex-start;display:block;margin:.1rem 0 .7rem;rotate:var(--tape)}
.slip__mark{display:block;width:clamp(2.6rem,4vw,3.1rem);height:auto;aspect-ratio:1;object-fit:cover;border-radius:22%;
  box-shadow:0 1px 2px rgba(var(--shadow),.22),0 6px 10px -8px rgba(var(--shadow),.4)}
.slip__pin::before,.slip__pin::after{content:"";position:absolute;width:1.5rem;height:.5rem;
  background:linear-gradient(100deg,rgba(248,243,229,.6),rgba(240,234,215,.88) 45%,rgba(248,243,229,.58));
  box-shadow:0 1px 1px rgba(var(--shadow),.14);
  -webkit-mask:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent 100%);
  mask:linear-gradient(90deg,transparent 0,#000 3px,#000 calc(100% - 3px),transparent 100%)}
.slip__pin::before{left:-.5rem;top:-.22rem;rotate:-42deg}
.slip__pin::after{right:-.5rem;bottom:-.22rem;rotate:-42deg}
.slip__name{display:flex;align-items:baseline;gap:.35rem;font:500 .9rem/1.3 var(--sans);color:var(--ink)}
.slip__go{font-size:.72rem;color:var(--ink-3)}
.slip__note{font:.73rem/1.45 var(--sans);color:var(--ink-2);margin-top:.4rem;opacity:0;overflow:hidden;
  transition:opacity .5s ease .14s}
.slip--link{cursor:pointer}
.slip--link:hover .slip__go{color:var(--ink)}
/* taken out of the folder: still lying, just further up the surface */
.folder:hover .slip,.folder.is-open .slip,.folder:focus-within .slip{
  transform:translateX(calc(-50% + var(--x) * var(--spread))) translateY(var(--y)) rotate(var(--r));
  box-shadow:0 1px 1px rgba(var(--shadow),.14),0 26px 34px -20px rgba(var(--shadow),.44)}
.folder:hover .slip__note,.folder.is-open .slip__note,.folder:focus-within .slip__note{opacity:1}
.folder:hover .folder__front,.folder.is-open .folder__front,.folder:focus-within .folder__front{transform:translateY(3%)}
.folder:hover .folder__tape,.folder.is-open .folder__tape{transform:translateY(6%)}
.folder .slip:hover,.folder .slip:focus-visible{z-index:9;
  transform:translateX(calc(-50% + var(--x) * var(--spread))) translateY(calc(var(--y) - 4%)) rotate(var(--r));
  box-shadow:0 2px 3px rgba(var(--shadow),.16),0 34px 44px -22px rgba(var(--shadow),.46)}
.slip:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media (max-width:900px){.slip{--spread:.86;width:min(38%,8.8rem)}}
@media (max-width:640px){
  .folder{height:clamp(16rem,52vw,19rem)}
  /* the pocket is shallower, so the cards show their names while at rest */
  .folder__pocket,.folder__back{height:38%}
  .folder__front{height:32%}
  .slip{--spread:.34;--rest:1.15;width:min(46%,7.4rem);height:clamp(7.5rem,26vw,9rem);
    bottom:22%;padding:.6rem .65rem .85rem}
  .slip__mark{width:2.3rem}
  .slip__note{display:none}
}

/* ─── the dock on small screens: icons only, the place you are gets a pill ─── */
@media (max-width:480px){
  .dock{padding:0 .6rem}
  .dock__glass{gap:.1rem;padding:.3rem}
  .dock a{padding:.5rem .62rem}
  .dock a .dock__label{display:none}
  .dock a.is-here{background:rgba(26,24,21,.07)}
  body.onscreen .dock a.is-here{background:rgba(255,255,255,.14)}
}

/* ─── the reading history: a whole shelf of covers ──────────────────── */
.library{
  list-style:none;margin:clamp(1.8rem,3.5vw,2.6rem) 0 0;padding:0;
  display:grid;grid-template-columns:repeat(6,1fr);
  gap:clamp(1rem,2.2vw,1.7rem) clamp(1rem,2.2vw,1.7rem);
}
.book{display:grid;gap:.55rem;align-content:start;min-width:0}

.book__cover{
  position:relative;display:block;aspect-ratio:2/3;overflow:hidden;
  border-radius:2px 4px 4px 2px;
  box-shadow:0 1px 1px rgba(var(--shadow),.20),0 10px 16px -10px rgba(var(--shadow),.34),0 28px 42px -26px rgba(var(--shadow),.32);
  transition:transform .55s cubic-bezier(.2,.8,.2,1),box-shadow .55s cubic-bezier(.2,.8,.2,1);
}
.book__cover img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* the same spine as the featured shelf */
.book__cover::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;border-radius:2px 4px 4px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.24) 0,rgba(0,0,0,.06) 1.6%,rgba(255,255,255,.16) 3.6%,rgba(255,255,255,0) 8%)}

/* plain cloth bindings stand in for books without a cover image */
.book__cover--plain{background:radial-gradient(120% 90% at 30% 8%,rgba(255,255,255,.11),rgba(255,255,255,0) 46%),var(--tone,#46505C)}
.book__plain{
  position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:.4rem;padding:.9rem .62rem;text-align:center;
}
.book__plain::before{content:"";position:absolute;inset:.52rem;border:1px solid rgba(255,255,255,.17);border-radius:1px;pointer-events:none}
.book__plain-title{font:500 .72rem/1.28 var(--sans);color:#F3F0E8;letter-spacing:.005em;overflow-wrap:break-word}
.book__plain-author{font:.6rem/1.35 var(--sans);color:rgba(243,240,232,.62)}

/* the veil that carries title + author on hover (for covers with images) */
.book__veil{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;justify-content:flex-end;
  padding:.75rem .7rem;border-radius:2px 4px 4px 2px;
  background:linear-gradient(to top,rgba(20,17,13,.82) 0%,rgba(20,17,13,.42) 34%,rgba(20,17,13,0) 68%);
  opacity:0;transition:opacity .4s ease}
.book__name{font:500 .8rem/1.3 var(--sans);color:#F6F3EC;transform:translateY(4px);transition:transform .4s cubic-bezier(.2,.8,.2,1)}
.book__author{font:.7rem/1.4 var(--sans);color:rgba(246,243,236,.64);transform:translateY(4px);transition:transform .4s cubic-bezier(.2,.8,.2,1) .03s}

.book__year{font:.7rem/1 var(--sans);color:var(--ink-3);letter-spacing:.05em;padding-left:2px}

.book:hover .book__cover{transform:translateY(-6px);
  box-shadow:0 1px 1px rgba(var(--shadow),.18),0 18px 26px -12px rgba(var(--shadow),.36),0 40px 56px -30px rgba(var(--shadow),.34)}
.book:hover .book__veil{opacity:1}
.book:hover .book__name,.book:hover .book__author{transform:none}

/* stagger the shelf in, capped so 84 books don't run on for minutes */
body.staging .band--library{opacity:0}
body.ready .band--library .book{
  animation:riseIn 1.05s cubic-bezier(.2,.75,.2,1) backwards;
  animation-delay:calc(.3s + min(var(--n,0),10) * 70ms)}

@media (hover:none){
  .book__veil{opacity:1}
  .book__name,.book__author{transform:none}
}
@media (max-width:1120px){.library{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.library{grid-template-columns:repeat(3,1fr)}}
@media (max-width:540px){.library{grid-template-columns:repeat(2,1fr)}}
@media (max-width:320px){.library{grid-template-columns:repeat(1,1fr)}}