/* Independent scrapbook study for the second screen. */
.intro-reveal .hero-layout{
  grid-template-columns:minmax(340px,.78fr) minmax(650px,1.35fr);
  gap:3.5%;padding:48px 1.5% 72px;align-items:center;
}
.scrapbook-wall{
  --ink:#344936;--cream:#f8f1df;--kraft:#c9a87f;--sage:#b9c1a3;
  position:relative;width:min(760px,100%);height:610px;justify-self:end;isolation:isolate;
}
.paper-layer{position:absolute;z-index:0;pointer-events:none;box-shadow:0 10px 25px #573f2b15}
.paper-kraft{left:2%;top:5%;width:48%;height:46%;background:#c9a87f88;transform:rotate(-2.4deg);clip-path:polygon(1% 3%,98% 0,100% 95%,93% 99%,3% 96%,0 75%)}
.paper-sage{right:1%;bottom:3%;width:46%;height:36%;background:#b5bda08a;transform:rotate(1.5deg);clip-path:polygon(3% 0,100% 4%,97% 100%,0 96%)}
.scrap-photo{position:absolute;margin:0;background:var(--cream);border:1px solid #40513c25;box-shadow:5px 8px 17px #5a483526;transition:transform .42s ease,box-shadow .42s ease;overflow:visible}
.scrap-photo img{display:block;width:100%;height:100%;object-fit:cover;filter:saturate(.78) contrast(.95) sepia(.04)}
.scrap-photo figcaption{position:absolute;color:var(--ink)}
.scrap-photo:before{content:'';position:absolute;z-index:3;background:#e8d4b4c9;box-shadow:0 1px 0 #fff8 inset;clip-path:polygon(2% 10%,98% 0,94% 96%,4% 100%)}
.scrap-photo:hover{z-index:20;box-shadow:9px 14px 24px #4d3e2e35}
.photo-main{z-index:8;left:34.5%;top:24%;width:29%;height:38%;padding:8px 8px 53px;transform:rotate(-1.5deg)}
.photo-main img{object-position:50% 22%;filter:saturate(.72) contrast(.95)}
.photo-main:before{width:62px;height:17px;top:-9px;left:48%;transform:translateX(-50%) rotate(2deg)}
.photo-main figcaption{left:12px;right:10px;bottom:10px;font:500 8px/1.3 'DM Sans',sans-serif;letter-spacing:1.2px}
.photo-main figcaption b{display:block;font-size:10px;letter-spacing:1.8px;margin-bottom:3px}
.photo-main:hover{transform:rotate(0deg) translateY(-5px)}
.photo-desk{z-index:3;left:1%;top:2%;width:30%;height:27%;padding:7px 7px 25px;transform:rotate(-3.5deg)}
.photo-desk img{object-position:50% 62%}.photo-desk:before{width:54px;height:15px;top:-8px;right:16%;transform:rotate(4deg)}
.photo-desk figcaption,.photo-shanghai figcaption,.photo-hku figcaption,.photo-floral figcaption,.photo-yellow figcaption,.photo-red figcaption,.photo-pwc figcaption,.photo-illuminera figcaption{left:8px;bottom:7px;font:600 7px/1 'DM Sans',sans-serif;letter-spacing:1px;text-transform:uppercase}
.photo-desk:hover{transform:rotate(-1deg) translateY(-4px)}
.photo-shanghai{z-index:2;left:1%;top:34%;width:30%;height:20%;padding:6px 6px 22px;transform:rotate(2.5deg)}
.photo-shanghai img{object-fit:contain;background:#f3ead8}
.photo-shanghai:before{width:46px;height:14px;top:-7px;left:15%;transform:rotate(-6deg)}
.photo-shanghai:hover{transform:rotate(0deg) translateY(-4px)}
.photo-yellow{z-index:4;left:5%;bottom:3%;width:24%;height:35%;padding:7px 7px 24px;transform:rotate(-4deg)}
.photo-yellow img{object-position:50% 34%}.photo-yellow:before{width:48px;height:15px;top:-8px;right:11%;transform:rotate(5deg)}
.photo-yellow:hover{transform:rotate(-1deg) translateY(-4px)}
.photo-hku{z-index:2;right:1%;top:1%;width:32%;height:24%;padding:7px 7px 24px;transform:rotate(2.8deg)}
.photo-hku img{object-position:72% 55%}.photo-hku:before{width:57px;height:15px;top:-8px;left:18%;transform:rotate(-4deg)}
.photo-hku:hover{transform:rotate(.5deg) translateY(-4px)}
.photo-floral{z-index:4;right:2%;top:32%;width:23%;height:26%;padding:6px 6px 23px;transform:rotate(4deg)}
.photo-floral img{object-position:51% 42%}.photo-floral:before{width:47px;height:14px;top:-8px;right:14%;transform:rotate(6deg)}
.photo-floral:hover{transform:rotate(1deg) translateY(-4px)}
.photo-red{z-index:5;right:3%;bottom:1%;width:26%;height:33%;padding:6px 6px 23px;transform:rotate(-3deg)}
.photo-red img{object-position:42% 37%}.photo-red:before{width:48px;height:15px;top:-8px;left:13%;transform:rotate(-5deg)}
.photo-red:hover{transform:rotate(-.5deg) translateY(-4px)}
.photo-pwc{z-index:5;left:31%;bottom:1%;width:23%;height:20%;padding:6px 6px 22px;transform:rotate(2.4deg)}
.photo-pwc img{object-position:50% 55%}.photo-pwc:before{width:43px;height:13px;top:-7px;left:16%;transform:rotate(5deg)}
.photo-pwc:hover{transform:rotate(0deg) translateY(-4px)}
.photo-illuminera{z-index:4;left:55%;bottom:3%;width:21%;height:21%;padding:6px 6px 22px;transform:rotate(-2deg)}
.photo-illuminera img{object-position:50% 38%}.photo-illuminera:before{width:42px;height:13px;top:-7px;right:13%;transform:rotate(-5deg)}
.photo-illuminera:hover{transform:rotate(0deg) translateY(-4px)}
.scrap-note{position:absolute;z-index:11;color:var(--ink);box-shadow:3px 5px 12px #5a48351c}
.note-top{left:27%;top:2%;padding:13px 18px 16px;background:#eab2bd;transform:rotate(2deg);font:20px/1.05 var(--fun);clip-path:polygon(0 4%,98% 0,100% 93%,4% 100%)}
.note-top i{display:block;width:75px;border-top:2px solid var(--ink);margin-top:8px;transform:rotate(-3deg)}
.note-bottom{left:61%;top:27%;width:113px;padding:11px 13px 13px;background:#e8cf79;transform:rotate(-2.5deg);font:10px/1.35 'DM Sans',sans-serif;letter-spacing:.6px}
.note-bottom strong{display:block;font-size:8px;letter-spacing:2px;margin-bottom:6px;border-bottom:1px solid #34493680;padding-bottom:4px}
.scrap-index{position:absolute;z-index:10;left:36%;bottom:0;font:600 7px/1 'DM Sans',sans-serif;letter-spacing:1.4px;color:#3449369e}
@media(max-width:1100px){
  .intro-reveal .hero-layout{grid-template-columns:minmax(300px,.7fr) minmax(570px,1.3fr);gap:2%}
  .scrapbook-wall{height:550px}.note-top{font-size:17px}.note-bottom{transform:rotate(-2.5deg) scale(.88)}
}
@media(max-width:850px){
  .intro-reveal .hero-layout{grid-template-columns:1fr;gap:28px;padding-inline:2%}
  .scrapbook-wall{width:min(720px,96vw);height:580px;justify-self:center}
}
@media(max-width:600px){
  .intro-reveal .hero-layout{gap:22px;padding-top:34px;padding-bottom:42px}
  .scrapbook-wall{width:100%;height:620px}
  .photo-main{left:33%;top:24%;width:34%;height:29%}
  .photo-desk{width:32%;height:22%}.photo-hku{width:31%;height:21%}
  .photo-shanghai{top:30%;width:31%;height:16%}.photo-floral{top:30%;width:25%;height:22%}
  .photo-yellow{width:27%;height:30%;bottom:5%}.photo-red{width:29%;height:30%;bottom:3%}
  .photo-pwc{left:31%;bottom:3%;width:23%;height:18%}.photo-illuminera{left:55%;bottom:5%;width:22%;height:19%}
  .note-top{left:29%;font-size:14px;padding:10px 12px}.note-bottom{left:66%;top:53%;transform:rotate(-2deg) scale(.78);transform-origin:left top}
  .scrap-photo figcaption{font-size:6px}.scrap-index{left:34%;bottom:0}
}