/* The issue, opened by the pull. One cover, one leaf, no overshoot. */
.silk-book{
  position:relative;border:0;background:none;padding:0;cursor:pointer;color:inherit;
  height:min(52vh,480px);
  width:calc(min(26vh,240px) * (1 + var(--open,0)));
  max-width:min(92vw,860px);
  perspective:1800px;
  transform-style:preserve-3d;
}
.silk-spread{
  position:absolute;inset:0;display:grid;grid-template-columns:1fr 1fr;
  background:#f6f1e6;overflow:hidden;
  box-shadow:
    0 1px 0 rgba(255,252,244,.45),
    0 28px 50px rgba(20,4,2,.38);
}
.silk-spread img{width:100%;height:100%;object-fit:cover;display:block}
.silk-leaf{
  display:flex;align-items:flex-end;justify-content:flex-start;
  padding:8% 8% 10%;
  background:
    linear-gradient(180deg,rgba(255,252,246,.4),transparent 28%),
    #f3eee4;
  color:#1a1712;
}
.silk-leaf b{font-size:clamp(28px,3vw,48px);font-weight:400;letter-spacing:-.03em;line-height:.9}
.silk-cover{
  position:absolute;left:0;top:0;bottom:0;z-index:2;
  width:calc(100% / (1 + var(--open,0)));
  transform-origin:left center;
  transform:rotateY(calc(var(--open,0) * -178deg));
  backface-visibility:hidden;
  background:#f1e8d8;overflow:hidden;
  box-shadow:
    inset 0 0 0 1px rgba(40,10,8,.18),
    calc((1 - var(--open,0)) * 8px) 16px 28px rgba(20,4,2,.32);
}
.silk-cover img{width:100%;height:100%;object-fit:cover;display:block}
.silk-spine{
  position:absolute;left:0;top:0;bottom:0;width:7%;
  background:linear-gradient(90deg,#4a0806,#9a120c 55%,#5c0a08);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.35);
}
.silk-book.is-cloth .silk-cover{
  background:
    linear-gradient(180deg,rgba(255,255,255,.08),transparent 26%),
    #243049;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
}
.silk-book.is-cloth .silk-cover img{
  width:62%;height:46%;object-fit:cover;
  box-shadow:0 1px 0 rgba(255,255,255,.28),0 10px 18px rgba(0,0,0,.35);
}
.silk-book.is-cloth .silk-cover em{
  font-style:normal;letter-spacing:.16em;font-size:11px;color:rgba(243,234,216,.82);
}
.silk-book.is-cloth .silk-spine{background:linear-gradient(90deg,#101624,#3a4a6e 50%,#1a243c)}
.silk-book.is-cloth .silk-leaf{background:#f4efe6}

/* Magazines shelf — the issues, after the open */
.mg-shelf{
  position:relative;margin:clamp(28px,6vh,72px) 0 clamp(36px,6vh,72px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(148px,1fr));
  gap:clamp(22px,2.4vw,36px) clamp(16px,1.8vw,28px);
  padding:8px 0 28px;
}
.mg-shelf:before{display:none}
.mg-vol{
  position:relative;width:100%;max-width:190px;justify-self:center;
  aspect-ratio:612/792;cursor:pointer;border:0;background:none;padding:0;
  color:inherit;
  opacity:0;
  transform:translateY(22px);
  transition:
    transform .55s cubic-bezier(.22,.68,.26,1) calc(var(--i,0) * 36ms),
    opacity .55s cubic-bezier(.22,.68,.26,1) calc(var(--i,0) * 36ms);
}
.mg-shelf.is-set .mg-vol{opacity:1;transform:none}
.mg-vol:hover,.mg-vol:focus-visible{
  transform:translateY(-8px);
  outline:none;
}
.mg-shelf.is-set .mg-vol.is-wait{opacity:.38}
.mg-vol.is-wait{cursor:default}
.mg-vol.is-wait:hover{transform:none}
.mg-vol-face{
  position:absolute;inset:0;background:#f1e8d8;overflow:hidden;
  box-shadow:
    1px 0 0 rgba(255,255,255,.2),
    -1px 0 0 rgba(40,10,8,.35),
    0 14px 28px rgba(0,0,0,.32);
}
.mg-vol-face .mg-print{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover}
.mg-vol-spine{
  position:absolute;left:-7%;top:2%;bottom:2%;width:9%;
  background:linear-gradient(90deg,#8a0e0a,#b3140e 45%,#6e0a08);
  box-shadow:inset -1px 0 0 rgba(0,0,0,.35);
}
.mg-vol-cap{
  position:absolute;left:0;right:0;bottom:-28px;text-align:center;
  font:400 10px/1.2 'IBM Plex Mono',ui-monospace,monospace;
  letter-spacing:.18em;text-transform:uppercase;color:rgba(241,232,216,.72);
}
.mg-vol.is-wait .mg-vol-face{background:rgba(241,232,216,.12);box-shadow:none;border:1px solid rgba(241,232,216,.2)}
.mg-tease{
  max-width:32em;margin:0 0 clamp(36px,6vh,64px);padding:0 var(--gut,24px);
  color:#f1e8d8;text-align:left;
  transform:rotate(-.4deg);
}
.mg-tease .mg-acc{font:400 clamp(28px,4vw,48px)/.92 'Instrument Serif',Georgia,serif;letter-spacing:-.02em;margin:0 0 .35em}
.mg-tease .mg-meta{opacity:.7;margin:0 0 1.1em}
.mg-tease .mg-note{font:italic 400 18px/1.4 'Instrument Serif',Georgia,serif;opacity:.78;margin:0 0 1.4em}
.mg-join{display:flex;justify-content:flex-start;margin-top:1.2em}

/* Volumes — cloth boards on the table, after the open */
.pb-shelf{
  position:relative;margin:clamp(28px,6vh,72px) 0 clamp(36px,6vh,72px);
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  gap:clamp(22px,2.4vw,40px) clamp(16px,1.8vw,28px);
  padding:8px 0 28px;
}
.pb-shelf:before{display:none}
.pb-vol{
  position:relative;width:100%;max-width:200px;justify-self:center;aspect-ratio:0.72;
  border:0;background:none;padding:0;cursor:pointer;color:inherit;
  opacity:0;
  transform:translateY(18px);
  transition:
    transform .55s cubic-bezier(.22,.68,.26,1) calc(var(--vi,0) * 32ms),
    opacity .5s cubic-bezier(.22,.68,.26,1) calc(var(--vi,0) * 32ms);
}
#p-photobooks.pb-vol-in .pb-vol,
#p-photobooks.pb-settled .pb-vol,
.pb-shelf.is-set .pb-vol{
  opacity:1;
  transform:none;
}
.pb-vol:hover,.pb-vol:focus-visible{
  transform:translateY(-8px);
  outline:none;
}
.pb-vol.is-wait{cursor:default}
#p-photobooks.pb-vol-in .pb-vol.is-wait,
#p-photobooks.pb-settled .pb-vol.is-wait{opacity:.38}
.pb-vol.is-wait:hover{transform:none}
.pb-vol-cloth{
  position:absolute;left:0;right:8%;top:0;bottom:0;overflow:hidden;
  background:
    linear-gradient(180deg,rgba(255,255,255,.07),transparent 24%),
    #243049;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.06),
    inset 8px 0 0 #1a2438,
    0 16px 28px rgba(6,8,16,.4);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
}
.pb-vol-cloth img{width:64%;aspect-ratio:4/5;object-fit:cover;display:block;
  box-shadow:0 1px 0 rgba(255,255,255,.3),0 8px 16px rgba(0,0,0,.32)}
.pb-vol-pages{
  position:absolute;right:0;top:4%;bottom:4%;width:9%;
  background:repeating-linear-gradient(90deg,#f7f2e8 0 1px,#e4dcc8 1px 2px);
  box-shadow:inset 1px 0 0 rgba(20,16,10,.2);
}
.pb-vol-foil{display:none !important}
.pb-vol-cap{
  position:absolute;left:0;right:0;bottom:-28px;text-align:center;
  font:400 10px/1.2 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.18em;
  text-transform:uppercase;color:rgba(241,232,216,.72);
}
.pb-vol.is-wait .pb-vol-cloth{
  background:rgba(241,232,216,.1);box-shadow:none;border:1px solid rgba(241,232,216,.22);
}
.pb-tease{
  max-width:32em;margin:0 0 clamp(36px,6vh,64px);padding:0 var(--gut,24px);
  color:#f1e8d8;text-align:left;transform:rotate(.35deg);
}
.pb-tease h2{font:400 clamp(28px,4vw,48px)/.92 'Instrument Serif',Georgia,serif;margin:0 0 .35em;letter-spacing:-.02em;color:#f1e8d8}
.pb-tease .pb-meta{opacity:.7;margin:0 0 1.1em;color:rgba(241,232,216,.7)}
.pb-tease .pb-note{font:italic 400 18px/1.4 'Instrument Serif',Georgia,serif;opacity:.78;margin:0 0 1.4em;color:rgba(241,232,216,.82)}
.pb-join{display:flex;justify-content:flex-start;margin-top:1.2em}

@media (prefers-reduced-motion:reduce){
  .mg-vol,.pb-vol,.mg-tease,.pb-tease,.silk-cover{transform:none !important}
  .mg-vol:hover,.mg-vol:focus-visible,.pb-vol:hover,.pb-vol:focus-visible{transform:none !important}
  .mg-shelf .mg-vol,.pb-shelf,.pb-vol,.silk-book{opacity:1 !important;transition:none !important}
  .mg-shelf .mg-vol.is-wait,#p-photobooks .pb-vol.is-wait{opacity:.38 !important}
  #p-photobooks .pb-peel{display:none}
  #p-photobooks .pb-shelf-pg .pb-shelf-k,
  #p-photobooks .pb-shelf-pg .pb-word,
  #p-photobooks .pb-shelf-pg .pb-lede{opacity:1 !important;clip-path:none !important;transform:none !important;transition:none !important}
}

/* Mailbox launch */
.mb-cv{position:fixed;inset:0;z-index:96}
.mb-thanks{
  position:fixed;left:50%;top:58%;transform:translate(-50%,-50%);
  z-index:97;text-align:center;color:#f1e8d8;pointer-events:none;
  opacity:1;transition:opacity .5s cubic-bezier(.22,.68,.26,1);
}
.mb-thanks.is-quiet{opacity:0}
.mb-thanks .mono{letter-spacing:.28em;font-size:10px;opacity:.55;margin:0 0 .8em}
.mb-thanks .mb-line{
  font:400 clamp(28px,4.5vw,48px)/1.05 'Instrument Serif',Georgia,serif;
  letter-spacing:-.02em;margin:0;text-shadow:0 1px 0 rgba(0,0,0,.35);
}
.mb-thanks .mb-sub{margin:.9em 0 0;opacity:.45;font-size:9px;letter-spacing:.18em}
.mb-form{max-width:22em;margin:0 auto;text-align:left}
.mb-lab{display:block;margin:0 0 .55em;letter-spacing:.28em;font-size:10px;opacity:.6}
.mb-row{display:flex;gap:0;border-bottom:1px solid currentColor}
.mb-in{
  flex:1;min-width:0;border:0;background:transparent;color:inherit;
  font:400 18px/1.4 'Bodoni Moda',Georgia,serif;padding:.55em 0;outline:none;
}
.mb-in::placeholder{opacity:.35}
.mb-go{
  border:0;background:transparent;color:inherit;cursor:pointer;
  font:400 10px/1 'IBM Plex Mono',ui-monospace,monospace;letter-spacing:.22em;
  text-transform:uppercase;padding:.55em 0 .55em 1em;
}
.mb-go:hover{opacity:.7}
.mb-hint{margin:.7em 0 0;font-size:9px;letter-spacing:.18em;opacity:.45}
.mg-join .mb-form,.pb-tease .mb-form,.nw-mailbox .mb-form{color:inherit}

/* News mailbox band */
.nw-mailbox{
  margin:clamp(40px,7vh,80px) var(--gut,24px);padding:clamp(28px,4vh,48px);
  background:rgba(12,11,10,.06);border-top:1px solid rgba(23,23,21,.18);
}
.nw-mailbox .nw-mb-k{margin:0 0 1em;letter-spacing:.28em;font-size:10px;opacity:.55}