/* EGGPOP album page (kit albumHTML). Needs holo.css for the foils and the kit fonts. */
.alb-page{--k:#0078BF;--pk:#FF48B0;position:relative;overflow:hidden;isolation:isolate;background:#FBFAF5;color:var(--k);
  border-radius:22px;padding:34px 40px 26px;box-shadow:0 0 0 2px color-mix(in srgb,var(--k) 18%,transparent) inset,0 22px 50px -28px rgba(0,0,0,.3)}
.alb-page::after{content:"";position:absolute;inset:0;pointer-events:none;mix-blend-mode:multiply;opacity:.35;z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .1 0 0 0 0 .1 0 0 0 0 .14 0 0 0 .2 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.alb-pond{position:absolute;inset:0;width:100%;height:100%;z-index:-1}
.alb-head,.alb-grid,.alb-foot{position:relative;z-index:1}
.alb-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:26px}
.alb-title{position:relative;isolation:isolate;margin:0;font:400 64px/.9 'Bowlby One';color:var(--k)}
.alb-title span{position:absolute;left:0;top:0;color:var(--pk);z-index:-1;transform:translate(-5px,4px)}
.alb-meta{display:grid;justify-items:end;gap:4px;font:400 14px 'Sigmar';letter-spacing:.02em}
.alb-meta b{font-weight:500;background:var(--k);color:#FBFAF5;border-radius:99px;padding:4px 12px}
.alb-meta span{font-family:'Sniglet';font-weight:800;font-size:18px;letter-spacing:0}
.alb-grid{display:grid;grid-template-columns:repeat(var(--cols,5),1fr);gap:46px 24px;margin-bottom:40px}
.alb-slot{position:relative;aspect-ratio:1;border-radius:20px;background:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--k) 30%,transparent) inset,0 0 0 7px #fff inset,0 0 0 8.5px color-mix(in srgb,var(--k) 16%,transparent) inset}
/* the number is a tab on the pocket's top edge, above the seal, so a found seal never covers it */
.alb-no{position:absolute;top:-10px;left:12px;z-index:2;padding:1px 7px;border-radius:7px;background:#fff;box-shadow:0 0 0 1.5px color-mix(in srgb,var(--k) 30%,transparent);font:400 13px/1.2 'Sigmar';color:#4A6E8A}
.alb-ghost{position:absolute;inset:17% 21% 25%;opacity:.12}.alb-ghost svg{width:100%;height:100%;display:block}.alb-ghost svg *{fill:var(--k)!important;stroke:none!important}
.alb-sp{position:absolute;bottom:11px;left:15px;font:400 20px 'Bowlby One';opacity:.3}
.alb-stk{position:absolute;inset:6%;transform:rotate(-2.5deg);
  filter:drop-shadow(0 1.5px 0 rgba(0,40,80,.12)) drop-shadow(0 8px 9px rgba(0,40,80,.14));
  opacity:calc(1 - (var(--day,1) - 1) * .075)}
.alb-stk>*{width:100%;display:block}
.alb-stk>svg,.alb-stk .foil>svg{filter:saturate(calc(1 - (var(--day,1) - 1) * .11))}
.alb-slot:nth-child(2n) .alb-stk{transform:rotate(2deg)}
.alb-slot:nth-child(3n) .alb-stk{transform:rotate(-.5deg)}
.alb-tag{position:absolute;bottom:-29px;left:0;right:0;text-align:center;font:400 12px 'Sigmar';color:#4A6E8A}
/* day 7: the seal comes away, a ghost of the ink stays on the pocket and the corner curls up */
.alb-slot.peel .alb-stk{opacity:.22;filter:grayscale(1) contrast(.9);clip-path:polygon(0 0,100% 0,100% 64%,64% 100%,0 100%)}
.alb-slot.peel::after{content:"";position:absolute;right:6%;bottom:6%;width:31%;height:31%;border-radius:0 0 18px 0;
  background:linear-gradient(135deg,transparent 49%,#fff 50%,#eef0f2 70%,#d3d9df);filter:drop-shadow(-4px -4px 5px rgba(0,40,80,.16))}
.alb-stamp{position:absolute;right:350px;top:6px;width:122px;height:122px;border-radius:50%;display:grid;place-content:center;justify-items:center;
  transform:rotate(-12deg);color:var(--pk);mix-blend-mode:multiply;z-index:4;
  box-shadow:0 0 0 5px var(--pk) inset,0 0 0 10px #0000 inset,0 0 0 12px var(--pk) inset;font:400 15px/1.05 'Bowlby One';opacity:.9}
.alb-page.full .alb-meta{visibility:hidden}
.alb-foot{display:flex;justify-content:space-between;gap:20px;font:400 12px 'Sigmar';color:#4A6E8A}
@media (max-width:700px){.alb-page{padding:22px 16px 18px}.alb-grid{--cols:2;gap:52px 14px}.alb-tag{font-size:13px;bottom:-31px}.alb-grid>.alb-slot:last-child:nth-child(odd){grid-column:1/-1;justify-self:center;width:calc(50% - 7px)}.alb-title{font-size:44px}.alb-foot{flex-direction:column;gap:6px}.alb-stamp{width:112px;height:112px;font-size:12px;right:12px;top:10px}}