:root{
  --memory-ink:#55483e;
  --memory-paper:#fffdf7;
  --memory-paper-edge:#dfcbb4;
  --memory-shadow:rgba(83,71,62,.2);
  --memory-page:#edede8;
}

*{
  box-sizing:border-box;
}

body > :not(.memory-page):not(.memory-lightbox):not(script):not(template){
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}

html{
  min-height:100%;
  background:var(--memory-page);
}

body{
  min-width:320px;
  min-height:100vh;
  margin:0;
  overflow-x:hidden;
  color:var(--memory-ink);
  background:
    radial-gradient(ellipse at 16% 7%,rgba(255,255,255,.88) 0%,rgba(255,255,255,0) 34%),
    radial-gradient(ellipse at 86% 20%,rgba(205,204,196,.2) 0%,rgba(205,204,196,0) 38%),
    radial-gradient(ellipse at 62% 92%,rgba(175,169,157,.13) 0%,rgba(175,169,157,0) 44%),
    linear-gradient(146deg,#f8f7f3 0%,#ededE8 48%,#e7e5df 100%);
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 1px 1px,rgba(87,82,76,.07) 0 .55px,transparent .85px),
    radial-gradient(circle at 5px 3px,rgba(255,255,255,.32) 0 .7px,transparent 1px),
    repeating-linear-gradient(14deg,rgba(100,96,90,.022) 0 1px,transparent 1px 7px);
  background-size:7px 7px,11px 11px,auto;
  mix-blend-mode:multiply;
  opacity:.56;
}

.memory-page{
  position:relative;
  z-index:1;
  min-height:100vh;
  padding:clamp(88px,6.5vw,104px) clamp(18px,3vw,54px) clamp(48px,5vw,84px);
  isolation:isolate;
  animation:memoryPageIn 1.05s ease-out both;
}

.memory-page::before{
  content:"";
  position:absolute;
  inset:clamp(9px,1vw,16px);
  z-index:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 1px 1px,rgba(103,101,96,.06) 0 .55px,transparent .85px),
    radial-gradient(ellipse at 12% 19%,rgba(172,149,111,.065) 0 1px,transparent 4px),
    radial-gradient(ellipse at 78% 34%,rgba(174,146,104,.05) 0 1px,transparent 4px),
    radial-gradient(ellipse at 34% 72%,rgba(159,139,105,.05) 0 1px,transparent 4px),
    linear-gradient(90deg,transparent 0 49.88%,rgba(105,99,92,.036) 50%,transparent 50.12%),
    linear-gradient(0deg,transparent 0 49.9%,rgba(105,99,92,.028) 50%,transparent 50.1%),
    repeating-linear-gradient(0deg,rgba(101,100,95,.055) 0 1px,transparent 1px 27px),
    repeating-linear-gradient(90deg,rgba(101,100,95,.05) 0 1px,transparent 1px 27px),
    linear-gradient(150deg,rgba(255,255,255,.72),rgba(239,238,232,.78) 58%,rgba(219,216,206,.54));
  background-size:9px 9px,21px 21px,27px 27px,31px 31px,auto,auto,27px 27px,27px 27px,auto;
  background-position:0 0,0 0,0 0,0 0,center,center,0 0,0 0,center;
  border:1px solid rgba(112,106,98,.16);
  border-radius:2px;
  box-shadow:
    inset 0 0 60px rgba(92,85,77,.06),
    inset 0 0 1px rgba(255,255,255,.85),
    0 0 28px rgba(76,70,63,.05);
  opacity:.96;
}

.memory-page::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(135deg,rgba(255,255,255,.48),transparent 12%) left top / 120px 120px no-repeat,
    linear-gradient(315deg,rgba(99,91,80,.08),transparent 18%) right bottom / 160px 160px no-repeat;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.48),
    inset 0 0 90px rgba(91,84,75,.045);
}

.memory-paper-collage{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

.memory-paper-piece{
  position:absolute;
  display:block;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.memory-paper-piece--grid{
  top:3.5%;
  left:1.4%;
  width:34%;
  height:46%;
  background:
    repeating-linear-gradient(0deg,rgba(86,91,96,.09) 0 1px,transparent 1px 18px),
    repeating-linear-gradient(90deg,rgba(86,91,96,.08) 0 1px,transparent 1px 18px),
    linear-gradient(145deg,rgba(255,255,255,.56),rgba(231,231,226,.46));
  clip-path:polygon(0 2%,97% 0,100% 96%,94% 99%,2% 98%);
  opacity:.62;
  transform:rotate(-1.8deg);
}

.memory-paper-piece--news{
  background:
    repeating-linear-gradient(0deg,rgba(70,66,62,.17) 0 1px,transparent 1px 5px),
    repeating-linear-gradient(90deg,rgba(94,86,77,.045) 0 1px,transparent 1px 24px),
    linear-gradient(155deg,rgba(255,255,255,.82),rgba(235,231,220,.72));
  box-shadow:0 5px 13px rgba(77,70,63,.07);
  opacity:.42;
}

.memory-paper-piece--news::before{
  content:"";
  position:absolute;
  inset:8px 9px auto;
  height:1px;
  background:rgba(75,65,57,.26);
  box-shadow:0 5px 0 rgba(75,65,57,.12);
}

.memory-paper-piece--news-a{
  top:7%;
  left:52%;
  width:152px;
  height:102px;
  clip-path:polygon(2% 1%,98% 0,100% 96%,91% 100%,6% 97%,0 9%);
  transform:rotate(2.6deg);
}

.memory-paper-piece--news-b{
  top:52%;
  right:1.6%;
  width:178px;
  height:112px;
  clip-path:polygon(0 4%,95% 0,100% 7%,98% 97%,7% 100%,2% 91%);
  transform:rotate(-3.2deg);
}

.memory-paper-piece--floral{
  top:28%;
  left:-3%;
  width:235px;
  height:310px;
  background:
    radial-gradient(circle at 9px 9px,rgba(142,121,123,.17) 0 2px,transparent 2.5px),
    radial-gradient(circle at 22px 20px,rgba(157,139,116,.13) 0 1.3px,transparent 1.8px),
    linear-gradient(155deg,rgba(255,255,255,.48),rgba(226,220,213,.5));
  background-size:29px 29px,37px 37px,auto;
  clip-path:polygon(3% 1%,96% 2%,100% 11%,98% 95%,89% 100%,5% 98%,0 87%,2% 8%);
  opacity:.5;
  transform:rotate(4deg);
}

.memory-paper-piece--tape{
  height:17px;
  border-right:1px solid rgba(150,129,104,.12);
  border-left:1px solid rgba(150,129,104,.12);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.26) 0 4px,transparent 4px 9px),
    linear-gradient(90deg,rgba(210,198,176,.38),rgba(245,238,222,.6),rgba(202,188,165,.32));
  box-shadow:0 1px 3px rgba(73,65,57,.06);
  clip-path:polygon(2% 0,98% 2%,100% 91%,2% 100%);
  opacity:.52;
}

.memory-paper-piece--tape-a{
  top:18%;
  left:30%;
  width:116px;
  transform:rotate(-8deg);
}

.memory-paper-piece--tape-b{
  top:70%;
  right:8%;
  width:132px;
  transform:rotate(7deg);
}

.memory-paper-piece--torn{
  background:linear-gradient(145deg,rgba(255,255,255,.66),rgba(226,222,213,.62));
  box-shadow:0 6px 14px rgba(78,70,62,.06);
  opacity:.45;
}

.memory-paper-piece--torn-a{
  top:40%;
  right:8%;
  width:126px;
  height:82px;
  clip-path:polygon(2% 8%,17% 0,34% 7%,50% 1%,68% 8%,86% 2%,100% 13%,97% 34%,100% 54%,95% 72%,100% 90%,83% 98%,66% 91%,49% 100%,31% 93%,15% 99%,0 87%,4% 67%,0 48%,5% 29%);
  transform:rotate(4.5deg);
}

.memory-paper-piece--torn-b{
  bottom:5%;
  left:14%;
  width:150px;
  height:94px;
  clip-path:polygon(0 14%,11% 4%,28% 9%,43% 0,60% 8%,77% 2%,93% 11%,100% 31%,96% 50%,100% 69%,91% 88%,76% 98%,61% 91%,44% 100%,28% 92%,13% 99%,2% 88%,5% 67%,0 47%,4% 30%);
  transform:rotate(-3.5deg);
}

.memory-paper-piece--type,
.memory-paper-piece--number,
.memory-paper-piece--subtitle{
  color:rgba(71,63,57,.2);
  font-family:Georgia,"Times New Roman",serif;
  line-height:1;
  mix-blend-mode:multiply;
}

.memory-paper-piece--type{
  top:13%;
  right:7%;
  font-size:clamp(22px,2.2vw,40px);
  letter-spacing:.13em;
  opacity:.38;
  transform:rotate(3deg);
}

.memory-paper-piece--number{
  bottom:7%;
  left:6%;
  font-size:clamp(72px,8vw,132px);
  font-weight:700;
  letter-spacing:-.04em;
  opacity:.17;
  transform:rotate(-4deg);
}

.memory-paper-piece--subtitle{
  top:68%;
  right:12%;
  font-size:10px;
  letter-spacing:.32em;
  opacity:.46;
  transform:rotate(-7deg);
}

.memory-scribbles{
  position:absolute;
  inset:0;
  z-index:1;
  overflow:hidden;
  pointer-events:none;
}

.memory-scribble{
  position:absolute;
  display:block;
  color:rgba(143,96,63,.28);
  opacity:.66;
  pointer-events:none;
  mix-blend-mode:multiply;
}

.memory-scribble--underline{
  top:14%;
  left:2.2%;
  width:96px;
  height:18px;
  border-bottom:1px solid currentColor;
  border-radius:50%;
  transform:rotate(-5deg);
}

.memory-scribble--underline::after{
  content:"";
  position:absolute;
  right:5px;
  bottom:-3px;
  width:12px;
  height:1px;
  background:currentColor;
  transform:rotate(28deg);
}

.memory-scribble--circle{
  top:35%;
  left:2.8%;
  width:69px;
  height:32px;
  border:1px solid currentColor;
  border-radius:50%;
  transform:rotate(-8deg);
}

.memory-scribble--arrow{
  top:48%;
  right:2.3%;
  width:78px;
  height:22px;
  border-top:1px solid currentColor;
  border-radius:50%;
  transform:rotate(8deg);
}

.memory-scribble--arrow::after{
  content:"";
  position:absolute;
  top:-6px;
  right:0;
  width:10px;
  height:10px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(43deg);
}

.memory-scribble--heart{
  top:63%;
  right:4.5%;
  width:11px;
  height:11px;
  background:currentColor;
  border-radius:2px;
  transform:rotate(45deg);
}

.memory-scribble--heart::before,
.memory-scribble--heart::after{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  background:currentColor;
  border-radius:50%;
}

.memory-scribble--heart::before{
  left:-6px;
}

.memory-scribble--heart::after{
  top:-6px;
}

.memory-scribble--flower{
  top:77%;
  left:3%;
  width:15px;
  height:15px;
  border:1px solid currentColor;
  border-radius:50%;
  transform:rotate(-6deg);
}

.memory-scribble--flower::before,
.memory-scribble--flower::after{
  content:"";
  position:absolute;
  inset:-7px 2px;
  border:1px solid currentColor;
  border-radius:50%;
}

.memory-scribble--flower::after{
  inset:2px -7px;
}

.memory-scribble--star{
  top:23%;
  right:5%;
  width:12px;
  height:12px;
  background:currentColor;
  clip-path:polygon(50% 0%,61% 35%,98% 36%,69% 57%,79% 94%,50% 72%,21% 94%,31% 57%,2% 36%,39% 35%);
  transform:rotate(11deg);
}

.memory-scribble--label{
  top:58%;
  left:3%;
  width:29px;
  height:14px;
  border:1px solid currentColor;
  border-radius:2px 4px 3px 2px;
  transform:rotate(-7deg);
}

.memory-scribble--label::before{
  content:"";
  position:absolute;
  top:4px;
  left:5px;
  width:16px;
  height:1px;
  background:currentColor;
  box-shadow:0 4px 0 currentColor;
  opacity:.75;
}

.memory-scribble--loop{
  top:86%;
  right:2.8%;
  width:72px;
  height:25px;
  border:1px solid currentColor;
  border-radius:50%;
  transform:rotate(-7deg);
}

.memory-scribble--loop::after{
  content:"";
  position:absolute;
  top:8px;
  left:49px;
  width:15px;
  height:1px;
  background:currentColor;
  transform:rotate(15deg);
}

.memory-scribble--dash{
  top:28%;
  right:16%;
  width:52px;
  height:1px;
  background:currentColor;
  transform:rotate(4deg);
}

.memory-scribble--dash::after{
  content:"";
  position:absolute;
  top:-4px;
  right:5px;
  width:1px;
  height:8px;
  background:currentColor;
  transform:rotate(35deg);
}

.memory-scribble--connect{
  color:rgba(57,48,42,.34);
  opacity:.58;
}

.memory-scribble--connect-a{
  top:10.5%;
  left:1.4%;
  width:46vw;
  height:68px;
  border-top:1px solid currentColor;
  border-radius:50%;
  transform:rotate(5deg);
}

.memory-scribble--connect-a::after{
  content:"";
  position:absolute;
  top:-4px;
  right:-1px;
  width:8px;
  height:8px;
  border-top:1px solid currentColor;
  border-right:1px solid currentColor;
  transform:rotate(42deg);
}

.memory-scribble--connect-b{
  top:37%;
  right:-2%;
  width:19vw;
  height:154px;
  border-right:1px solid currentColor;
  border-radius:50%;
  transform:rotate(-4deg);
}

.memory-scribble--connect-b::after{
  content:"";
  position:absolute;
  right:-4px;
  bottom:3px;
  width:8px;
  height:8px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:rotate(18deg);
}

.memory-scribble--connect-c{
  top:74%;
  left:4%;
  width:25vw;
  height:78px;
  border-top:1px dashed currentColor;
  border-radius:50%;
  transform:rotate(-6deg);
}

.memory-scribble--index{
  color:rgba(62,52,46,.38);
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px;
  line-height:1;
  letter-spacing:.18em;
  opacity:.68;
}

.memory-scribble--index::after{
  content:"";
  position:absolute;
  top:50%;
  left:calc(100% + 6px);
  width:48px;
  height:1px;
  background:currentColor;
  transform:rotate(4deg);
  transform-origin:left center;
}

.memory-scribble--index-a{
  top:27%;
  left:20%;
  transform:rotate(-5deg);
}

.memory-scribble--index-b{
  top:66%;
  right:15%;
  transform:rotate(6deg);
}

.memory-collage{
  position:relative;
  z-index:2;
  column-count:5;
  column-gap:clamp(52px,4.6vw,72px);
  width:min(1740px,calc(100vw - 76px));
  margin:0 auto;
}

.memory-photo{
  position:relative;
  display:block;
  break-inside:avoid;
  -webkit-column-break-inside:avoid;
  width:var(--photo-width,92%);
  margin:0 auto var(--photo-gap,72px) var(--photo-offset,0%);
  padding:clamp(.78rem,.9vw,1.15rem) clamp(.78rem,.9vw,1.15rem) clamp(1.35rem,1.5vw,1.85rem);
  overflow:visible;
  background:
    linear-gradient(165deg,var(--memory-paper) 0%,#fbf4e8 74%,#f2e5d4 100%);
  border:1px solid rgba(137,105,79,.42);
  border-radius:3px;
  box-shadow:
    0 15px 25px rgba(91,66,48,.18),
    0 4px 8px rgba(79,58,43,.1),
    inset 0 1px 0 rgba(255,255,255,.96);
  cursor:pointer;
  opacity:0;
  transform:translateY(var(--nudge,0px)) rotate(var(--rotate,0deg));
  transform-origin:50% 52%;
  animation:memoryPhotoIn .9s cubic-bezier(.2,.72,.28,1) forwards;
  animation-delay:calc(.13s + var(--order,0) * .035s);
}

.memory-photo.is-ready{
  opacity:1;
  transform:translateY(var(--nudge,0px)) rotate(var(--rotate,0deg));
  animation:none;
}

.memory-photo:nth-of-type(1){--order:0}
.memory-photo:nth-of-type(2){--order:1}
.memory-photo:nth-of-type(3){--order:2}
.memory-photo:nth-of-type(4){--order:3}
.memory-photo:nth-of-type(5){--order:4}
.memory-photo:nth-of-type(6){--order:5}
.memory-photo:nth-of-type(7){--order:6}
.memory-photo:nth-of-type(8){--order:7}
.memory-photo:nth-of-type(9){--order:8}
.memory-photo:nth-of-type(10){--order:9}
.memory-photo:nth-of-type(11){--order:10}
.memory-photo:nth-of-type(12){--order:11}
.memory-photo:nth-of-type(13){--order:12}
.memory-photo:nth-of-type(14){--order:13}
.memory-photo:nth-of-type(15){--order:14}
.memory-photo:nth-of-type(16){--order:15}
.memory-photo:nth-of-type(17){--order:16}
.memory-photo:nth-of-type(18){--order:17}
.memory-photo:nth-of-type(19){--order:18}
.memory-photo:nth-of-type(20){--order:19}
.memory-photo:nth-of-type(21){--order:20}
.memory-photo:nth-of-type(22){--order:21}
.memory-photo:nth-of-type(23){--order:22}

.memory-photo:nth-of-type(8n+1){
  --photo-width:88%;
  --photo-offset:1%;
  --photo-gap:78px;
  --nudge:-3px;
}

.memory-photo:nth-of-type(8n+2){
  --photo-width:94%;
  --photo-offset:3%;
  --photo-gap:66px;
  --nudge:4px;
}

.memory-photo:nth-of-type(8n+3){
  --photo-width:80%;
  --photo-offset:10%;
  --photo-gap:82px;
  --nudge:-7px;
}

.memory-photo:nth-of-type(8n+4){
  --photo-width:98%;
  --photo-offset:0%;
  --photo-gap:72px;
  --nudge:5px;
}

.memory-photo:nth-of-type(8n+5){
  --photo-width:86%;
  --photo-offset:5%;
  --photo-gap:88px;
  --nudge:-5px;
}

.memory-photo:nth-of-type(8n+6){
  --photo-width:92%;
  --photo-offset:2%;
  --photo-gap:64px;
  --nudge:6px;
}

.memory-photo:nth-of-type(8n+7){
  --photo-width:82%;
  --photo-offset:8%;
  --photo-gap:86px;
  --nudge:-4px;
}

.memory-photo:nth-of-type(8n){
  --photo-width:96%;
  --photo-offset:3%;
  --photo-gap:74px;
  --nudge:3px;
}

@media (hover:hover) and (pointer:fine){
  .memory-photo.is-ready:hover,
  .memory-photo.is-ready:focus-visible{
    animation:memoryPaperJitter .54s ease-in-out infinite;
    animation-delay:0s;
  }
}

.memory-photo img{
  display:block;
  width:100%;
  height:auto;
  border-radius:1px;
  background:#d8c9b7;
  filter:sepia(.17) saturate(.74) contrast(.93) brightness(1.045);
  user-select:none;
  -webkit-user-drag:none;
}

.memory-photo::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(160,126,97,.12);
  border-radius:1px;
  pointer-events:none;
}

.memory-photo::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:2px;
  background:linear-gradient(120deg,rgba(255,248,225,.2),transparent 48%,rgba(128,92,57,.05));
  pointer-events:none;
}

.memory-decor{
  position:absolute;
  z-index:6;
  display:block;
  pointer-events:none;
}

.memory-decor--star{
  right:7px;
  bottom:3px;
  width:11px;
  height:11px;
  background:linear-gradient(145deg,#e7ad8f,#c98569);
  clip-path:polygon(50% 0%,61% 35%,98% 36%,69% 57%,79% 94%,50% 72%,21% 94%,31% 57%,2% 36%,39% 35%);
  filter:drop-shadow(0 1px 1px rgba(104,72,53,.16));
  opacity:.88;
  transform:rotate(9deg);
}

.memory-decor--star-left{
  right:auto;
  left:7px;
  transform:rotate(-10deg);
}

.memory-decor--tape{
  top:-6px;
  left:19%;
  width:46px;
  height:13px;
  border-right:1px solid rgba(166,130,94,.13);
  border-left:1px solid rgba(166,130,94,.13);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.1) 0 3px,rgba(255,255,255,0) 3px 6px),
    linear-gradient(90deg,rgba(222,191,144,.76),rgba(246,225,190,.9) 50%,rgba(220,183,146,.72));
  box-shadow:0 1px 3px rgba(91,66,48,.09);
  clip-path:polygon(3% 0%,97% 2%,100% 92%,2% 100%);
  opacity:.9;
  transform:rotate(-7deg);
}

.memory-decor--tape-right{
  right:16%;
  left:auto;
  transform:rotate(6deg);
}

.memory-decor--tape-low{
  top:auto;
  bottom:-5px;
  transform:rotate(5deg);
}

.memory-decor--doodle{
  bottom:2px;
  left:14px;
  width:30px;
  height:12px;
  border-top:2px solid rgba(190,125,105,.68);
  border-radius:50%;
  opacity:.7;
  transform:rotate(-6deg);
}

.memory-decor--doodle::before,
.memory-decor--doodle::after{
  content:"";
  position:absolute;
  top:-2px;
  width:4px;
  height:4px;
  background:rgba(197,147,97,.72);
  border-radius:50%;
}

.memory-decor--doodle::before{
  left:-2px;
}

.memory-decor--doodle::after{
  right:-1px;
  background:rgba(174,117,98,.65);
}

.memory-decor--doodle-right{
  right:14px;
  left:auto;
  transform:rotate(7deg);
}

.memory-decor--tape-light{
  top:-5px;
  right:14%;
  left:auto;
  width:34px;
  height:8px;
  border-right:1px solid rgba(166,130,94,.16);
  border-left:1px solid rgba(166,130,94,.16);
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.16) 0 3px,rgba(255,255,255,0) 3px 7px),
    linear-gradient(90deg,rgba(224,196,151,.48),rgba(248,232,202,.68) 50%,rgba(222,190,151,.45));
  box-shadow:
    0 1px 2px rgba(91,66,48,.07),
    inset 0 0 0 1px rgba(255,255,255,.1);
  clip-path:polygon(3% 0%,97% 2%,100% 92%,2% 100%);
  opacity:.58;
  transform:rotate(-6deg);
}

.memory-decor--tape-light::after{
  content:"";
  position:absolute;
  inset:-2px -3px;
  background:linear-gradient(90deg,rgba(255,255,255,.22),transparent 42%,rgba(130,87,55,.08));
  opacity:.45;
}

.memory-decor--tape-light-right{
  right:10%;
  transform:rotate(5deg);
}

.memory-decor--tape-light-left{
  right:auto;
  left:11%;
  transform:rotate(-5deg);
}

.memory-decor--tape-light-low{
  top:auto;
  right:18%;
  bottom:-4px;
  transform:rotate(6deg);
}

.memory-decor--tape-light-center{
  right:44%;
  transform:rotate(-4deg);
}

.memory-decor--label{
  right:11px;
  bottom:1px;
  width:24px;
  height:12px;
  border:1px solid rgba(155,111,71,.32);
  border-radius:2px 4px 3px 2px;
  background:rgba(244,223,187,.48);
  box-shadow:0 1px 2px rgba(91,66,48,.07);
  opacity:.72;
  transform:rotate(6deg);
}

.memory-decor--label::before{
  content:"";
  position:absolute;
  top:4px;
  left:5px;
  width:12px;
  height:1px;
  background:rgba(145,99,65,.63);
  box-shadow:0 4px 0 rgba(145,99,65,.48);
}

.memory-decor--label-left{
  right:auto;
  left:11px;
  transform:rotate(-5deg);
}

.memory-decor--round-stamp{
  right:8px;
  bottom:5px;
  width:22px;
  height:22px;
  border:1px solid rgba(114,91,76,.5);
  border-radius:50%;
  opacity:.58;
  transform:rotate(-8deg);
}

.memory-decor--round-stamp::before{
  content:"";
  position:absolute;
  inset:3px;
  border:1px solid rgba(114,91,76,.42);
  border-radius:50%;
}

.memory-decor--round-stamp::after{
  content:"";
  position:absolute;
  top:9px;
  left:5px;
  width:10px;
  height:1px;
  background:rgba(114,91,76,.52);
  box-shadow:0 4px 0 rgba(114,91,76,.32);
  transform:rotate(-12deg);
}

.memory-decor--round-stamp-blue{
  border-color:rgba(87,102,111,.45);
  transform:rotate(10deg);
}

.memory-decor--round-stamp-blue::before,
.memory-decor--round-stamp-blue::after{
  border-color:rgba(87,102,111,.38);
  background-color:rgba(87,102,111,.36);
}

.memory-decor--round-stamp-soft{
  right:auto;
  left:8px;
  border-color:rgba(142,103,91,.42);
  transform:rotate(7deg);
}

.memory-decor--round-stamp-soft::before,
.memory-decor--round-stamp-soft::after{
  border-color:rgba(142,103,91,.36);
  background-color:rgba(142,103,91,.3);
}

.memory-photo__note{
  position:absolute;
  top:calc(100% + 9px);
  left:0;
  width:100%;
  padding:7px 10px 8px 13px;
  color:rgba(101,75,59,.82);
  font-family:"KaiTi","STKaiti",cursive;
  font-size:12px;
  line-height:1.58;
  letter-spacing:.02em;
  text-align:left;
  text-shadow:0 1px 0 rgba(255,255,255,.72);
  background:
    linear-gradient(90deg,rgba(255,253,246,.82),rgba(247,236,215,.7) 78%,rgba(238,222,196,.48));
  border-left:2px solid rgba(184,126,102,.34);
  border-radius:2px;
  box-shadow:0 4px 9px rgba(91,66,48,.055);
  opacity:.86;
  pointer-events:none;
  transform:rotate(-1.4deg);
}

.memory-photo__note::before{
  content:"";
  position:absolute;
  top:-5px;
  left:14px;
  width:34px;
  height:7px;
  background:linear-gradient(90deg,rgba(220,193,150,.46),rgba(246,229,197,.66),rgba(217,187,146,.4));
  clip-path:polygon(3% 0,97% 3%,100% 91%,2% 100%);
  transform:rotate(-5deg);
}

.memory-photo__note-mark{
  position:absolute;
  right:10px;
  bottom:5px;
  z-index:7;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:30px;
  height:14px;
  padding:0 6px;
  color:rgba(115,82,66,.78);
  font-family:"KaiTi","STKaiti",cursive;
  font-size:10px;
  line-height:1;
  letter-spacing:.08em;
  text-shadow:0 1px 0 rgba(255,255,255,.82);
  background:linear-gradient(100deg,rgba(249,232,209,.88),rgba(255,248,237,.94));
  border:1px solid rgba(165,119,92,.28);
  border-radius:1px 3px 2px 3px;
  box-shadow:0 2px 5px rgba(91,66,48,.08);
  opacity:.9;
  pointer-events:none;
  transform:rotate(2deg);
}

.memory-photo__note-mark::before{
  content:"";
  position:absolute;
  top:-4px;
  left:7px;
  width:16px;
  height:5px;
  background:linear-gradient(90deg,rgba(222,193,153,.5),rgba(247,229,201,.72),rgba(218,188,149,.42));
  clip-path:polygon(2% 0,98% 4%,100% 92%,0 100%);
  transform:rotate(-5deg);
}

.girlhood-board{
  position:relative;
  z-index:2;
  width:min(1280px,calc(100vw - 76px));
  margin:clamp(122px,10vw,176px) auto clamp(74px,7vw,112px);
  padding:clamp(44px,5vw,72px) clamp(28px,5.4vw,78px) clamp(50px,5vw,80px);
  overflow:hidden;
  background:
    radial-gradient(circle at 1px 1px,rgba(103,99,92,.07) 0 .6px,transparent .9px),
    radial-gradient(ellipse at 14% 24%,rgba(174,145,103,.08) 0 1px,transparent 5px),
    radial-gradient(ellipse at 82% 68%,rgba(160,139,108,.06) 0 1px,transparent 5px),
    linear-gradient(152deg,rgba(255,253,247,.98),rgba(244,238,226,.97) 62%,rgba(232,224,209,.96));
  background-size:9px 9px,31px 31px,37px 37px,auto;
  border:1px solid rgba(122,102,81,.25);
  border-radius:3px;
  box-shadow:
    0 24px 44px rgba(80,65,51,.1),
    0 5px 13px rgba(80,65,51,.06),
    inset 0 1px 0 rgba(255,255,255,.94);
  isolation:isolate;
}

.girlhood-board::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    repeating-linear-gradient(0deg,rgba(91,95,99,.055) 0 1px,transparent 1px 26px),
    repeating-linear-gradient(90deg,rgba(91,95,99,.05) 0 1px,transparent 1px 26px),
    linear-gradient(120deg,rgba(255,255,255,.55),transparent 28%,rgba(139,119,94,.04) 72%,transparent);
  opacity:.78;
}

.girlhood-board::after{
  content:"";
  position:absolute;
  inset:14px;
  z-index:-1;
  pointer-events:none;
  border:1px solid rgba(137,108,81,.13);
  border-radius:2px;
  box-shadow:inset 0 0 24px rgba(115,92,66,.035);
}

.girlhood-board__tape{
  position:absolute;
  z-index:4;
  display:block;
  width:112px;
  height:24px;
  pointer-events:none;
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.17) 0 5px,transparent 5px 10px),
    linear-gradient(90deg,rgba(224,201,163,.65),rgba(246,232,205,.82) 50%,rgba(215,190,153,.58));
  border-right:1px solid rgba(156,126,91,.14);
  border-left:1px solid rgba(156,126,91,.14);
  box-shadow:0 2px 5px rgba(84,65,49,.08);
  clip-path:polygon(2% 0,98% 5%,100% 88%,2% 100%);
  opacity:.72;
}

.girlhood-board__tape--left{
  top:-7px;
  left:8%;
  transform:rotate(-6deg);
}

.girlhood-board__tape--right{
  top:-8px;
  right:8%;
  transform:rotate(7deg);
}

.girlhood-board__head{
  position:relative;
  max-width:920px;
  margin-bottom:clamp(36px,4.4vw,58px);
  padding-bottom:clamp(24px,3vw,38px);
  border-bottom:1px dashed rgba(120,94,72,.19);
}

.girlhood-board__eyebrow{
  margin:0 0 12px;
  color:rgba(111,81,62,.58);
  font-family:Georgia,"Times New Roman",serif;
  font-size:11px;
  line-height:1;
  letter-spacing:.28em;
}

.girlhood-board__head h2{
  margin:0;
  color:#654c3e;
  font-family:"ZCOOL KuaiLe","KaiTi","STKaiti",cursive;
  font-size:clamp(36px,4.2vw,62px);
  font-weight:400;
  line-height:1.08;
  letter-spacing:.08em;
}

.girlhood-board__lede{
  margin:18px 0 0;
  color:rgba(102,75,60,.82);
  font-family:"KaiTi","STKaiti",cursive;
  font-size:clamp(17px,1.5vw,22px);
  line-height:1.8;
  letter-spacing:.025em;
}

.girlhood-board__letters{
  display:grid;
  grid-template-columns:minmax(0,1.18fr) minmax(290px,.82fr);
  gap:clamp(30px,4vw,58px);
  align-items:start;
}

.girlhood-note{
  position:relative;
  min-width:0;
  padding:clamp(32px,3.3vw,48px) clamp(26px,3.2vw,50px) clamp(38px,3.8vw,54px);
  color:#5d4b40;
  background:
    repeating-linear-gradient(0deg,rgba(88,103,115,.055) 0 1px,transparent 1px 29px),
    linear-gradient(153deg,rgba(255,253,246,.98),rgba(247,237,218,.97));
  border:1px solid rgba(126,99,75,.28);
  border-radius:3px 4px 2px 3px;
  box-shadow:
    0 15px 29px rgba(86,66,49,.11),
    0 3px 7px rgba(86,66,49,.06),
    inset 0 1px 0 rgba(255,255,255,.94);
  transform:rotate(-.55deg);
}

.girlhood-note::before{
  content:"";
  position:absolute;
  top:-7px;
  left:12%;
  width:66px;
  height:15px;
  pointer-events:none;
  background:linear-gradient(90deg,rgba(218,192,151,.54),rgba(246,230,198,.74),rgba(213,185,145,.48));
  border-right:1px solid rgba(156,126,91,.12);
  border-left:1px solid rgba(156,126,91,.12);
  clip-path:polygon(3% 0,97% 4%,100% 91%,2% 100%);
  opacity:.68;
  transform:rotate(-7deg);
}

.girlhood-note--short{
  margin-top:clamp(18px,3vw,42px);
  background:
    repeating-linear-gradient(0deg,rgba(116,91,82,.045) 0 1px,transparent 1px 29px),
    linear-gradient(157deg,rgba(250,241,224,.98),rgba(238,224,201,.97));
  transform:rotate(1.1deg);
}

.girlhood-note--short::before{
  right:15%;
  left:auto;
  transform:rotate(8deg);
}

.girlhood-note__index{
  position:absolute;
  top:16px;
  right:20px;
  color:rgba(126,90,65,.22);
  font-family:Georgia,"Times New Roman",serif;
  font-size:clamp(28px,3vw,42px);
  line-height:1;
  letter-spacing:-.04em;
  pointer-events:none;
}

.girlhood-note p{
  position:relative;
  z-index:1;
  margin:0;
  color:#5d4b40;
  font-family:"Noto Serif SC","Source Han Serif SC","Songti SC","STSong",serif;
  font-size:clamp(16px,1.22vw,19px);
  line-height:2.05;
  letter-spacing:.025em;
  text-align:justify;
  text-justify:inter-ideograph;
  overflow-wrap:anywhere;
}

.memory-back{
  position:fixed;
  z-index:30;
  top:max(16px,env(safe-area-inset-top));
  right:max(16px,env(safe-area-inset-right));
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:9px 18px 10px;
  color:#725845;
  font-family:"ZCOOL KuaiLe","KaiTi","STKaiti",cursive;
  font-size:15px;
  line-height:1;
  letter-spacing:.08em;
  background:rgba(255,250,239,.9);
  border:1px solid rgba(135,101,78,.5);
  border-radius:8px 11px 9px 10px;
  box-shadow:
    0 7px 15px rgba(90,63,45,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
  text-decoration:none;
  transition:color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease,box-shadow .22s ease;
}

.memory-back::before{
  content:"";
  position:absolute;
  inset:4px;
  border:1px dashed rgba(151,108,84,.25);
  border-radius:5px 8px 6px 7px;
  pointer-events:none;
}

.memory-back:hover,
.memory-back:focus-visible{
  color:#674838;
  background:#f3dfcf;
  border-color:rgba(151,103,80,.68);
  transform:translateY(-2px);
  box-shadow:0 8px 17px rgba(90,63,45,.19);
}

.memory-back:focus-visible{
  outline:3px solid rgba(174,101,85,.32);
  outline-offset:3px;
}

@keyframes memoryPageIn{
  from{opacity:0}
  to{opacity:1}
}

@keyframes memoryPhotoIn{
  from{
    opacity:0;
    transform:translateY(calc(var(--nudge,0px) + 10px)) rotate(calc(var(--rotate,0deg) - .7deg)) scale(.985);
  }
  to{
    opacity:1;
    transform:translateY(var(--nudge,0px)) rotate(var(--rotate,0deg)) scale(1);
  }
}

@keyframes memoryPaperJitter{
  0%,
  100%{
    transform:translateY(var(--nudge,0px)) translateX(-.55px) rotate(calc(var(--rotate,0deg) - .4deg));
  }
  50%{
    transform:translateY(var(--nudge,0px)) translateX(.55px) rotate(calc(var(--rotate,0deg) + .4deg));
  }
}

.memory-lightbox-open{
  overflow:hidden;
}

.memory-lightbox{
  position:fixed;
  inset:0;
  z-index:80;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:clamp(14px,3vw,44px);
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease,visibility 0s linear .28s;
}

.memory-lightbox.is-open{
  visibility:visible;
  opacity:1;
  pointer-events:auto;
  transition-delay:0s;
}

.memory-lightbox__backdrop{
  position:absolute;
  inset:0;
  background:rgba(76,57,44,.48);
  backdrop-filter:blur(2px);
}

.memory-lightbox__paper{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:center;
  width:min(92vw,1240px);
  height:min(88vh,900px);
  padding:clamp(44px,4vw,56px) clamp(14px,2vw,24px) clamp(14px,2vw,24px);
  background:linear-gradient(165deg,#fffdf8 0%,#faf2e5 76%,#f1e3d1 100%);
  border:1px solid rgba(137,105,79,.46);
  border-radius:4px;
  box-shadow:
    0 24px 55px rgba(64,44,32,.28),
    0 5px 12px rgba(79,58,43,.13),
    inset 0 1px 0 rgba(255,255,255,.98);
  transform:translateY(9px) scale(.988);
  transition:transform .3s cubic-bezier(.2,.72,.28,1);
}

.memory-lightbox.is-open .memory-lightbox__paper{
  transform:translateY(0) scale(1);
}

.memory-lightbox__image{
  display:block;
  max-width:100%;
  max-height:100%;
  width:auto;
  height:auto;
  object-fit:contain;
  filter:sepia(.08) saturate(.9) contrast(.97) brightness(1.02);
  user-select:none;
  -webkit-user-drag:none;
}

.memory-lightbox__notes{
  position:absolute;
  right:clamp(18px,3vw,34px);
  bottom:clamp(15px,2.4vh,24px);
  left:clamp(18px,3vw,34px);
  z-index:2;
  max-height:min(19vh,124px);
  overflow:auto;
  padding:9px 14px 10px 17px;
  color:rgba(102,75,60,.88);
  font-family:"KaiTi","STKaiti",cursive;
  font-size:clamp(14px,1.18vw,17px);
  line-height:1.68;
  letter-spacing:.025em;
  text-align:left;
  white-space:pre-line;
  background:linear-gradient(96deg,rgba(255,251,242,.96),rgba(248,234,215,.92));
  border-left:2px solid rgba(175,112,91,.38);
  border-radius:2px;
  box-shadow:0 5px 12px rgba(91,66,48,.08);
}

.memory-lightbox__notes[hidden]{
  display:none;
}

.memory-lightbox__paper.has-notes{
  padding-bottom:clamp(106px,16vh,138px);
}

.memory-lightbox__close{
  position:absolute;
  top:10px;
  right:10px;
  z-index:2;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  padding:0;
  color:#725845;
  background:rgba(255,250,239,.94);
  border:1px solid rgba(135,101,78,.5);
  border-radius:50%;
  box-shadow:
    0 6px 13px rgba(90,63,45,.14),
    inset 0 1px 0 rgba(255,255,255,.95);
  cursor:pointer;
  transition:color .22s ease,background-color .22s ease,border-color .22s ease,transform .22s ease;
}

.memory-lightbox__close svg{
  width:18px;
  height:18px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
}

.memory-lightbox__close:hover,
.memory-lightbox__close:focus-visible{
  color:#674838;
  background:#f3dfcf;
  border-color:rgba(151,103,80,.68);
  transform:rotate(3deg);
}

.memory-lightbox__close:focus-visible{
  outline:3px solid rgba(174,101,85,.32);
  outline-offset:3px;
}

@media (max-width:1280px){
  .memory-collage{
    column-count:4;
    column-gap:clamp(48px,4.7vw,60px);
    width:min(1240px,calc(100vw - 58px));
  }

  .girlhood-board{
    width:min(1180px,calc(100vw - 58px));
  }
}

@media (max-width:980px){
  .memory-collage{
    column-count:3;
    column-gap:clamp(50px,5vw,58px);
    width:min(900px,calc(100vw - 52px));
  }

  .memory-photo{
    margin-bottom:60px;
    padding:.7rem .7rem 1.2rem;
  }

  .girlhood-board{
    width:min(900px,calc(100vw - 52px));
    margin-top:clamp(108px,12vw,138px);
    padding:48px 38px 56px;
  }

  .girlhood-board__letters{
    grid-template-columns:1fr;
    gap:38px;
  }

  .girlhood-note--short{
    width:min(680px,92%);
    margin:0 0 0 auto;
  }
}

@media (max-width:660px){
  .memory-page{
    padding:72px 18px 42px;
  }

  .memory-collage{
    column-count:2;
    column-gap:40px;
    width:calc(100vw - 36px);
  }

  .memory-photo{
    margin-bottom:54px;
    padding:.58rem .58rem 1rem;
  }

  .girlhood-board{
    width:calc(100vw - 36px);
    margin:102px auto 56px;
    padding:36px 18px 42px;
    border-radius:2px;
  }

  .girlhood-board::after{
    inset:9px;
  }

  .girlhood-board__tape{
    width:82px;
    height:19px;
  }

  .girlhood-board__head{
    margin-bottom:32px;
    padding-bottom:24px;
  }

  .girlhood-board__eyebrow{
    margin-bottom:10px;
    font-size:9px;
    letter-spacing:.2em;
  }

  .girlhood-board__head h2{
    font-size:35px;
  }

  .girlhood-board__lede{
    margin-top:14px;
    font-size:17px;
    line-height:1.72;
  }

  .girlhood-board__letters{
    gap:30px;
  }

  .girlhood-note{
    padding:34px 20px 38px;
    transform:rotate(-.35deg);
  }

  .girlhood-note--short{
    width:100%;
    margin:0;
    transform:rotate(.55deg);
  }

  .girlhood-note__index{
    top:13px;
    right:15px;
    font-size:28px;
  }

  .girlhood-note p{
    font-size:16px;
    line-height:1.96;
    letter-spacing:.018em;
    text-align:left;
  }

  .memory-back{
    top:max(11px,env(safe-area-inset-top));
    right:max(11px,env(safe-area-inset-right));
    min-height:39px;
    padding:8px 15px 9px;
    font-size:14px;
  }

  .memory-lightbox{
    padding:12px;
  }

  .memory-lightbox__paper{
    width:calc(100vw - 24px);
    height:min(86vh,760px);
    padding:48px 10px 12px;
  }

  .memory-lightbox__paper.has-notes{
    padding-bottom:112px;
  }

  .memory-lightbox__notes{
    right:14px;
    bottom:12px;
    left:14px;
    max-height:86px;
    padding:8px 11px 9px 14px;
    font-size:14px;
    line-height:1.58;
  }

  .memory-photo__note-mark{
    right:6px;
    bottom:3px;
    min-width:27px;
    height:13px;
    padding:0 5px;
    font-size:9px;
  }

  .memory-lightbox__close{
    top:7px;
    right:7px;
    width:35px;
    height:35px;
  }
}

@media (prefers-reduced-motion:reduce){
  .memory-page,
  .memory-photo,
  .memory-photo.is-ready:hover,
  .memory-photo.is-ready:focus-visible{
    animation:none;
  }

  .memory-photo{
    opacity:1;
  }

  .memory-back,
  .memory-lightbox,
  .memory-lightbox__paper,
  .memory-lightbox__close{
    transition:none;
  }
}