*{box-sizing:border-box} html,body{margin:0;width:100%;height:100%;overflow:hidden;color:#2a2324;background:#e9dfd5 url('/flipbook/pania-assets/journal-website-background-v246.jpeg') center center / cover no-repeat fixed}
:root{--artboard-w:1440px;--artboard-h:900px}
#journal-artboard{position:absolute;left:50%;top:calc(50% + 18px);width:var(--artboard-w);height:var(--artboard-h);transform-origin:center center;overflow:hidden;background:transparent;will-change:transform}
#book{position:absolute!important;inset:0!important;width:1440px!important;height:900px!important;max-width:none!important;max-height:none!important;margin:0!important;transform:none!important}
.page{position:relative;background:#f7f0e8;overflow:hidden;box-shadow:inset 0 0 0 1px rgba(87,60,64,.08)}
.image-page{background:#ead8bd} .image-page img{width:100%;height:100%;object-fit:cover;object-position:center center;display:block;filter:none}
.scribble{position:absolute;right:6%;bottom:5%;font-size:28px;filter:drop-shadow(0 2px 9px rgba(0,0,0,.2))}
.journal-page{background-color:#fbf4eb;background-image:repeating-linear-gradient(to bottom,transparent 0,transparent 31px,rgba(111,137,174,.17) 32px,transparent 33px)}
.journal-page:before{content:"";position:absolute;left:9%;top:0;bottom:0;width:1px;background:rgba(225,75,109,.34)}
.journal-inner{height:100%;overflow:hidden;padding:300px 8% 8% 14%;scrollbar-width:none} .journal-inner::-webkit-scrollbar{display:none}
.journal-inner.journal-intro{padding-top:300px}
h2{font-family:'Nothing You Could Do',cursive;font-size:clamp(28px,3.1vw,53px);line-height:1.03;margin:0 0 20px;color:#7f51cf;font-weight:400;transform:rotate(-1.1deg)}
h2::after{content:"";display:block;width:42%;height:3px;margin-top:7px;background:linear-gradient(90deg,#7f51cf,#ed3f75);border-radius:99px;transform:rotate(-1deg)}
.journal-photo{width:39%;max-height:165px;object-fit:cover;float:right;margin:0 0 14px 22px;transform:rotate(2deg);box-shadow:0 6px 20px rgba(46,30,32,.12);border:8px solid #fff}
.journal-copy{font-family:'Nothing You Could Do',cursive;font-size:clamp(15px,1.2vw,20px);line-height:1.38;color:#33282a} .journal-copy p{margin:0 0 12px}
.substack{display:inline-block;margin-top:6px;font-family:'Nothing You Could Do',cursive;font-size:18px;color:#e33f71;text-decoration:none;border-bottom:1px solid currentColor}
.journal-hint{position:fixed;left:50%;bottom:2.6vh;transform:translateX(-50%);font:10px/1.2 Arial,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:#463b3e;opacity:.62}
.flip-arrow{position:fixed;top:50%;transform:translateY(-50%);width:46px;height:46px;border:1px solid rgba(60,45,48,.18);border-radius:999px;background:rgba(251,244,235,.92);color:#3c2d30;font:300 28px/44px Georgia,serif;text-align:center;cursor:pointer;z-index:1001;user-select:none;box-shadow:0 10px 28px rgba(36,26,28,.08)}
.flip-arrow:hover{background:#fff}
.flip-arrow.prev{left:18px}.flip-arrow.next{right:18px}
@media(max-width:760px){.journal-inner{padding:300px 8% 8% 14%}.journal-inner.journal-intro{padding-top:300px}.journal-photo{width:39%;max-height:165px}.flip-arrow{top:auto;bottom:22px;transform:none}.flip-arrow.prev{left:18px}.flip-arrow.next{right:18px}}

/* v185 — dark worn journal cover behind pages only */
#journal-artboard{
  overflow:visible;
  isolation:isolate;
}
#journal-artboard::before{
  content:"";
  position:absolute;
  left:-18px;
  top:-14px;
  width:calc(100% + 36px);
  height:calc(100% + 34px);
  border-radius:30px 34px 28px 32px;
  background:
    radial-gradient(ellipse at 12% 18%,rgba(255,255,255,.045) 0 1px,transparent 2px),
    radial-gradient(ellipse at 72% 68%,rgba(255,255,255,.025) 0 1px,transparent 2px),
    repeating-linear-gradient(101deg,rgba(255,255,255,.012) 0 1px,transparent 1px 5px),
    linear-gradient(112deg,#171311 0%,#2b211b 23%,#17120f 52%,#30231c 78%,#120f0d 100%);
  background-size:9px 11px,13px 15px,auto,auto;
  box-shadow:
    0 18px 34px rgba(20,12,9,.36),
    0 5px 10px rgba(20,12,9,.30),
    inset 0 0 0 2px rgba(0,0,0,.48),
    inset 0 0 24px rgba(0,0,0,.58),
    inset 8px 0 12px rgba(103,72,50,.12),
    inset -7px 0 14px rgba(0,0,0,.35);
  z-index:0;
  pointer-events:none;
}
#journal-artboard::after{
  content:"";
  position:absolute;
  left:50%;
  top:-7px;
  bottom:-10px;
  width:30px;
  transform:translateX(-50%);
  border-radius:42%;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(84,58,43,.16) 45%,rgba(0,0,0,.34));
  filter:blur(.3px);
  opacity:.78;
  z-index:.5;
  pointer-events:none;
}
#book{z-index:1!important;}


/* v186 — subtle layered page-stack effect behind the active spread */
.page-stack{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
}
.stack-layer{
  position:absolute;
  border-radius:20px 26px 18px 24px;
  background:
    linear-gradient(180deg, rgba(255,250,242,.96) 0%, rgba(244,232,215,.98) 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.4) inset,
    0 -1px 0 rgba(145,110,79,.08) inset,
    0 10px 22px rgba(54,35,28,.11),
    0 1px 0 rgba(93,64,46,.08);
  outline:1px solid rgba(124,90,66,.10);
}
.stack-layer::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:repeating-linear-gradient(
    180deg,
    rgba(143,112,82,.030) 0 1px,
    rgba(255,255,255,.0) 1px 4px
  );
  opacity:.65;
}
.layer-1{
  left:-9px;
  right:10px;
  top:4px;
  bottom:-5px;
  transform:rotate(-0.18deg);
}
.layer-2{
  left:-6px;
  right:7px;
  top:7px;
  bottom:-8px;
  transform:rotate(0.12deg);
}
.layer-3{
  left:-3px;
  right:4px;
  top:10px;
  bottom:-11px;
  transform:rotate(-0.08deg);
}
.layer-4{
  left:-1px;
  right:2px;
  top:13px;
  bottom:-14px;
  transform:rotate(0.05deg);
}
#book{z-index:2!important;}


/* v187 — stronger, realistic page-stack like reference */
#journal-artboard{
  overflow:visible;
  isolation:isolate;
}
#journal-artboard::before{
  content:"";
  position:absolute;
  left:-14px;
  right:-14px;
  top:-8px;
  bottom:-18px;
  border-radius:24px 28px 26px 28px;
  background:
    linear-gradient(180deg,rgba(255,255,255,.06) 0%,rgba(255,255,255,0) 20%),
    repeating-linear-gradient(102deg,rgba(255,255,255,.014) 0 2px,transparent 2px 9px),
    linear-gradient(112deg,#14100f 0%,#261d19 18%,#171210 44%,#2e221c 74%,#110f0d 100%);
  box-shadow:
    0 18px 34px rgba(18,11,9,.30),
    0 5px 12px rgba(18,11,9,.24),
    inset 0 0 0 1px rgba(0,0,0,.58),
    inset 0 0 18px rgba(0,0,0,.42),
    inset 5px 0 8px rgba(117,88,62,.10),
    inset -5px 0 9px rgba(0,0,0,.28);
  z-index:0;
  pointer-events:none;
}
#journal-artboard::after{
  content:"";
  position:absolute;
  left:50%;
  top:-5px;
  bottom:-8px;
  width:22px;
  transform:translateX(-50%);
  border-radius:40%;
  background:linear-gradient(90deg,rgba(0,0,0,.25),rgba(88,62,46,.13) 46%,rgba(0,0,0,.32));
  opacity:.65;
  z-index:1;
  pointer-events:none;
}
.page-stack{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
}
.stack-layer{
  position:absolute;
  border-radius:18px 20px 18px 20px;
  background:
    repeating-linear-gradient(180deg,rgba(154,117,82,.06) 0 1px,rgba(255,255,255,0) 1px 4px),
    linear-gradient(180deg,#f4e8d7 0%,#efdfcb 100%);
  border:1px solid rgba(124,92,66,.11);
  box-shadow:
    0 1px 0 rgba(255,255,255,.64) inset,
    0 -1px 0 rgba(149,116,84,.10) inset,
    0 8px 16px rgba(45,29,23,.08);
}
.stack-layer::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 14%,rgba(110,80,55,.04) 100%);
}
.layer-1{left:-14px; right:-7px; top:2px; bottom:-8px; transform:rotate(-.18deg);}
.layer-2{left:-12px; right:-6px; top:4px; bottom:-10px; transform:rotate(.12deg);}
.layer-3{left:-10px; right:-5px; top:6px; bottom:-12px; transform:rotate(-.10deg);}
.layer-4{left:-8px; right:-4px; top:8px; bottom:-14px; transform:rotate(.08deg);}
.layer-5{left:-6px; right:-3px; top:10px; bottom:-16px; transform:rotate(-.06deg);}
.layer-6{left:-4px; right:-2px; top:12px; bottom:-18px; transform:rotate(.04deg);}
#book{
  z-index:3!important;
}


/* v188 — page stack moved inside cover with rounded page corners */
#journal-artboard::before{
  left:-14px !important;
  right:-14px !important;
  top:-8px !important;
  bottom:-18px !important;
}
.page-stack{
  inset:10px 12px 12px 12px !important;
  overflow:hidden;
  border-radius:20px 22px 20px 22px;
  z-index:2;
}
.stack-layer{
  border-radius:18px 20px 18px 20px !important;
}
.layer-1{left:4px; right:4px; top:4px; bottom:4px; transform:rotate(-.14deg);}
.layer-2{left:6px; right:6px; top:6px; bottom:6px; transform:rotate(.10deg);}
.layer-3{left:8px; right:8px; top:8px; bottom:8px; transform:rotate(-.08deg);}
.layer-4{left:10px; right:10px; top:10px; bottom:10px; transform:rotate(.06deg);}
.layer-5{left:12px; right:12px; top:12px; bottom:12px; transform:rotate(-.04deg);}
.layer-6{left:14px; right:14px; top:14px; bottom:14px; transform:rotate(.03deg);}
#book{
  left:12px !important;
  right:12px !important;
  top:10px !important;
  bottom:12px !important;
  width:auto !important;
  height:auto !important;
  border-radius:18px 20px 18px 20px;
  overflow:hidden;
}
.page{
  border-radius:18px 20px 18px 20px;
  overflow:hidden;
}


/* v189 — restore VISIBLE layered pages, kept fully inside the cover */
.page-stack{
  inset:4px 6px 7px 6px !important;
  overflow:visible !important;
  border-radius:22px 24px 22px 24px !important;
  z-index:2 !important;
}
.stack-layer{
  border-radius:21px 23px 21px 23px !important;
  background:
    repeating-linear-gradient(180deg,
      rgba(127,94,65,.09) 0 1px,
      rgba(255,255,255,.08) 1px 3px,
      rgba(163,128,92,.04) 3px 5px),
    linear-gradient(180deg,#f7ead7 0%,#eddbc2 100%) !important;
  border:1px solid rgba(115,82,57,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    inset 0 -1px 0 rgba(127,91,61,.13),
    0 2px 5px rgba(43,27,20,.10) !important;
}
/* outermost sheet first; each following sheet steps inward */
.layer-1{left:2px;  right:2px;  top:2px;  bottom:2px;  transform:rotate(-.10deg) !important;}
.layer-2{left:4px;  right:4px;  top:4px;  bottom:4px;  transform:rotate(.08deg) !important;}
.layer-3{left:6px;  right:6px;  top:6px;  bottom:6px;  transform:rotate(-.06deg) !important;}
.layer-4{left:8px;  right:8px;  top:8px;  bottom:8px;  transform:rotate(.05deg) !important;}
.layer-5{left:10px; right:10px; top:10px; bottom:10px; transform:rotate(-.04deg) !important;}
.layer-6{left:12px; right:12px; top:12px; bottom:12px; transform:rotate(.03deg) !important;}
/* inset the live spread enough to expose the page stack on all outer edges */
#book{
  left:20px !important;
  right:20px !important;
  top:18px !important;
  bottom:20px !important;
  width:auto !important;
  height:auto !important;
  border-radius:20px 22px 20px 22px !important;
  overflow:hidden !important;
  z-index:3 !important;
}
.page{
  border-radius:20px 22px 20px 22px !important;
  overflow:hidden !important;
}


/* v190 — layered paper stack fully contained INSIDE the dark cover */
#journal-artboard::before{
  left:-18px !important;
  right:-18px !important;
  top:-14px !important;
  bottom:-20px !important;
  border-radius:30px 32px 30px 32px !important;
  z-index:0 !important;
}
.page-stack{
  inset:10px 12px 13px 12px !important;
  overflow:hidden !important;
  border-radius:24px 26px 24px 26px !important;
  z-index:2 !important;
}
.stack-layer{
  border-radius:22px 24px 22px 24px !important;
}
.layer-1{left:0px;  right:0px;  top:0px;  bottom:0px;  transform:rotate(-.08deg) !important;}
.layer-2{left:3px;  right:3px;  top:3px;  bottom:3px;  transform:rotate(.06deg) !important;}
.layer-3{left:6px;  right:6px;  top:6px;  bottom:6px;  transform:rotate(-.05deg) !important;}
.layer-4{left:9px;  right:9px;  top:9px;  bottom:9px;  transform:rotate(.04deg) !important;}
.layer-5{left:12px; right:12px; top:12px; bottom:12px; transform:rotate(-.03deg) !important;}
.layer-6{left:15px; right:15px; top:15px; bottom:15px; transform:rotate(.02deg) !important;}
#book{
  left:30px !important;
  right:30px !important;
  top:28px !important;
  bottom:30px !important;
  width:auto !important;
  height:auto !important;
  border-radius:22px 24px 22px 24px !important;
  overflow:hidden !important;
  z-index:3 !important;
}
.page{
  border-radius:22px 24px 22px 24px !important;
  overflow:hidden !important;
}


/* v191 — keep BOTH the live spread and layered sheets physically inside cover */
.page-stack{
  inset:9px 12px 12px 12px !important;
  overflow:hidden !important;
  border-radius:24px 26px 24px 26px !important;
}

/* Exposed rounded paper edges between cover and active spread */
.layer-1{left:0px;  right:0px;  top:0px;  bottom:0px;  transform:rotate(-.06deg) !important;}
.layer-2{left:3px;  right:3px;  top:3px;  bottom:3px;  transform:rotate(.05deg) !important;}
.layer-3{left:6px;  right:6px;  top:6px;  bottom:6px;  transform:rotate(-.04deg) !important;}
.layer-4{left:9px;  right:9px;  top:9px;  bottom:9px;  transform:rotate(.03deg) !important;}
.layer-5{left:12px; right:12px; top:12px; bottom:12px; transform:rotate(-.025deg) !important;}
.layer-6{left:15px; right:15px; top:15px; bottom:15px; transform:rotate(.02deg) !important;}

/* 1380 × 863 spread centered inside the 1440 × 900 artboard */
#book{
  left:30px !important;
  top:18px !important;
  right:auto !important;
  bottom:auto !important;
  width:1380px !important;
  height:863px !important;
  max-width:1380px !important;
  max-height:863px !important;
  border-radius:22px 24px 22px 24px !important;
  overflow:hidden !important;
  z-index:3 !important;
}
.page{
  border-radius:22px 24px 22px 24px !important;
  overflow:hidden !important;
}


/* v193 — move journal down, thinner cover, bottom-left journal label */
#journal-artboard{
  top:calc(50% + 42px) !important;
}

/* Thinner dark cover: keep it wrapping the page stack, but reduce the heavy border. */
#journal-artboard::before{
  left:8px !important;
  right:8px !important;
  top:4px !important;
  bottom:8px !important;
  border-radius:26px 28px 26px 28px !important;
  box-shadow:
    0 14px 28px rgba(18,11,9,.24),
    0 4px 10px rgba(18,11,9,.18),
    inset 0 0 0 1px rgba(0,0,0,.52),
    inset 0 0 13px rgba(0,0,0,.34),
    inset 4px 0 6px rgba(117,88,62,.08),
    inset -4px 0 7px rgba(0,0,0,.22) !important;
}

.journal-bottom-left-label{
  position:fixed;
  left:0;
  bottom:0;
  width:min(620px,45vw);
  height:auto;
  display:block;
  z-index:7;
  pointer-events:none;
  user-select:none;
}

@media(max-width:900px){
  #journal-artboard{top:calc(50% + 36px) !important;}
  .journal-bottom-left-label{width:min(520px,58vw);}
}


/* v194 — smaller bottom-left label + balanced slightly thicker cover */
.journal-bottom-left-label{
  width:min(550px,40vw) !important;
}

/* Slightly increase the visible cover rim overall. */
#journal-artboard::before{
  left:5px !important;
  right:5px !important;
  top:2px !important;
  bottom:6px !important;
}

/* Shift the live spread a touch right so left/right cover thickness reads evenly. */
#book{
  left:34px !important;
  width:1380px !important;
}

@media(max-width:900px){
  .journal-bottom-left-label{width:min(470px,52vw) !important;}
}


/* v195 — approved journal cover proportions */
#journal-artboard::before {
  width: calc(100% - 8px) !important;
  height: calc(100% - 8px) !important;
  border-width: 5px !important;
  box-sizing: border-box !important;
}


/* v196 — smaller bottom-left journal label only */
.journal-bottom-left-label{
  width:min(470px,34vw) !important;
}
@media(max-width:900px){
  .journal-bottom-left-label{width:min(400px,46vw) !important;}
}


/* v197 — smooth uninterrupted page flip; do not clip the turning sheet */
#book{overflow:visible !important;}
.stf__parent,.stf__wrapper,.stf__block{overflow:visible !important;}
.stf__item{backface-visibility:hidden;-webkit-backface-visibility:hidden;}


/* v198 — warmer coloured rough page-edge treatment like the reference */
.page-stack{
  inset:9px 12px 12px 12px !important;
  overflow:hidden !important;
  border-radius:24px 26px 24px 26px !important;
  isolation:isolate;
}
.page-stack::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    linear-gradient(90deg,
      rgba(124,84,54,.28) 0 8px,
      rgba(227,198,160,.18) 8px 16px,
      rgba(247,235,219,0) 16px calc(100% - 16px),
      rgba(225,194,153,.18) calc(100% - 16px) calc(100% - 8px),
      rgba(110,73,47,.30) calc(100% - 8px) 100%),
    linear-gradient(180deg,
      rgba(252,247,239,.98) 0 9px,
      rgba(233,214,187,.28) 9px 17px,
      rgba(0,0,0,0) 17px calc(100% - 16px),
      rgba(211,181,143,.18) calc(100% - 16px) calc(100% - 8px),
      rgba(139,98,67,.16) calc(100% - 8px) 100%),
    repeating-linear-gradient(180deg,
      rgba(162,123,86,.24) 0 1px,
      rgba(251,244,233,.88) 1px 2px,
      rgba(199,161,121,.16) 2px 3px,
      rgba(247,238,225,0) 3px 5px);
  box-shadow:
    inset 0 1px 0 rgba(255,251,245,.78),
    inset 0 -1px 0 rgba(150,112,79,.18),
    inset 12px 0 10px -9px rgba(124,83,51,.20),
    inset -12px 0 10px -9px rgba(104,70,45,.22);
  opacity:.92;
  z-index:0;
  pointer-events:none;
}
.page-stack::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(20px 7px at 6% 0%, rgba(255,255,255,.42) 0 50%, transparent 54%) repeat-x top,
    radial-gradient(18px 7px at 10% 100%, rgba(157,118,80,.18) 0 44%, transparent 50%) repeat-x bottom;
  background-size:28px 9px, 24px 8px;
  opacity:.34;
  mix-blend-mode:soft-light;
  z-index:1;
  pointer-events:none;
}
.stack-layer{
  background:
    linear-gradient(90deg,
      rgba(108,71,43,.16) 0 5px,
      rgba(243,232,214,0) 12px calc(100% - 12px),
      rgba(110,74,48,.14) calc(100% - 5px) 100%),
    repeating-linear-gradient(180deg,
      rgba(147,110,77,.18) 0 1px,
      rgba(255,252,246,.84) 1px 2px,
      rgba(196,156,117,.10) 2px 3px,
      rgba(243,231,213,0) 3px 5px),
    linear-gradient(180deg,#f7ebda 0%,#eedcc3 55%,#e5d0af 100%) !important;
  border:1px solid rgba(116,82,56,.16) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,251,245,.82),
    inset 0 -1px 0 rgba(152,113,80,.15),
    0 1px 3px rgba(43,27,20,.10) !important;
}
.stack-layer::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:
    radial-gradient(22px 8px at 8% 0%, rgba(255,255,255,.30) 0 48%, transparent 52%) repeat-x top,
    radial-gradient(18px 7px at 12% 100%, rgba(157,118,80,.15) 0 42%, transparent 48%) repeat-x bottom;
  background-size:30px 10px, 26px 9px;
  opacity:.28;
  z-index:0;
  pointer-events:none;
}
.stack-layer::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,0) 14%,rgba(110,80,55,.05) 100%);
  opacity:1;
}


/* v199 — stronger rough, worn page edges */
.page-stack{
  overflow:visible !important;
}

/* rough outer paper block */
.page-stack::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:24px 26px 24px 26px;
  pointer-events:none;
  z-index:0;
  background:
    /* left/right grime */
    linear-gradient(90deg,
      rgba(115,74,44,.34) 0 6px,
      rgba(183,139,94,.24) 6px 11px,
      rgba(245,232,214,0) 15px calc(100% - 15px),
      rgba(176,132,88,.22) calc(100% - 11px) calc(100% - 6px),
      rgba(106,69,43,.34) calc(100% - 6px) 100%),
    /* top/bottom aged tone */
    linear-gradient(180deg,
      rgba(250,242,229,.95) 0 5px,
      rgba(194,151,105,.20) 5px 12px,
      rgba(0,0,0,0) 17px calc(100% - 17px),
      rgba(173,128,85,.21) calc(100% - 11px) calc(100% - 5px),
      rgba(110,73,45,.25) calc(100% - 5px) 100%),
    repeating-linear-gradient(180deg,
      rgba(120,83,53,.18) 0 1px,
      rgba(250,241,226,.85) 1px 2px,
      rgba(204,165,121,.12) 2px 3px,
      transparent 3px 5px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.75),
    inset 0 -1px 0 rgba(132,94,61,.18),
    inset 13px 0 12px -10px rgba(102,63,37,.26),
    inset -13px 0 12px -10px rgba(102,63,37,.26);
  opacity:.98;
}

/* irregular / deckled edge illusion */
.page-stack::after{
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:24px 26px 24px 26px;
  pointer-events:none;
  z-index:2;
  background:
    radial-gradient(18px 7px at 3% 0%, rgba(255,250,243,.85) 0 46%, transparent 50%) repeat-x top,
    radial-gradient(16px 6px at 9% 100%, rgba(113,76,48,.28) 0 42%, transparent 49%) repeat-x bottom,
    radial-gradient(7px 18px at 0% 8%, rgba(255,250,243,.75) 0 45%, transparent 50%) repeat-y left,
    radial-gradient(7px 18px at 100% 13%, rgba(105,70,45,.25) 0 43%, transparent 50%) repeat-y right;
  background-size:
    26px 9px,
    23px 8px,
    9px 26px,
    9px 24px;
  filter: contrast(1.1);
  opacity:.62;
  mix-blend-mode:soft-light;
}

/* make every visible paper layer rougher and slightly different */
.stack-layer{
  overflow:visible !important;
  border-radius:21px 23px 21px 23px !important;
  background:
    linear-gradient(90deg,
      rgba(105,67,40,.20) 0 5px,
      transparent 12px calc(100% - 12px),
      rgba(101,65,40,.18) calc(100% - 5px) 100%),
    repeating-linear-gradient(180deg,
      rgba(126,91,60,.23) 0 1px,
      rgba(255,249,240,.84) 1px 2px,
      rgba(187,145,103,.10) 2px 3px,
      transparent 3px 5px),
    linear-gradient(180deg,#f6ead9 0%,#ecd8bd 55%,#e1c8a5 100%) !important;
  border:1px solid rgba(111,76,49,.20) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,252,247,.82),
    inset 0 -1px 0 rgba(130,91,58,.16),
    0 1px 2px rgba(52,31,20,.12) !important;
}

.stack-layer::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(17px 6px at 4% 0%, rgba(255,255,255,.55) 0 44%, transparent 50%) repeat-x top,
    radial-gradient(15px 6px at 8% 100%, rgba(121,83,51,.25) 0 41%, transparent 48%) repeat-x bottom,
    radial-gradient(6px 16px at 0% 10%, rgba(255,255,255,.42) 0 42%, transparent 49%) repeat-y left,
    radial-gradient(6px 16px at 100% 12%, rgba(118,79,48,.22) 0 40%, transparent 48%) repeat-y right;
  background-size:
    24px 8px,
    22px 8px,
    8px 24px,
    8px 22px;
  opacity:.46;
  mix-blend-mode:soft-light;
}

/* tiny offsets make the edge look hand-cut, not machine perfect */
.layer-1{transform:rotate(-.10deg) translate(-1px,0) !important;}
.layer-2{transform:rotate(.08deg) translate(1px,1px) !important;}
.layer-3{transform:rotate(-.07deg) translate(0,1px) !important;}
.layer-4{transform:rotate(.05deg) translate(1px,0) !important;}
.layer-5{transform:rotate(-.04deg) translate(-1px,1px) !important;}
.layer-6{transform:rotate(.03deg) translate(0,1px) !important;}


/* v201 — remove jagged/deckled TOP edge only; keep rough side/bottom edges */
.page-stack::after{
  background:
    radial-gradient(16px 6px at 9% 100%, rgba(113,76,48,.28) 0 42%, transparent 49%) repeat-x bottom,
    radial-gradient(7px 18px at 0% 8%, rgba(255,250,243,.75) 0 45%, transparent 50%) repeat-y left,
    radial-gradient(7px 18px at 100% 13%, rgba(105,70,45,.25) 0 43%, transparent 50%) repeat-y right !important;
  background-size:
    23px 8px,
    9px 26px,
    9px 24px !important;
}

.stack-layer::before{
  background:
    radial-gradient(15px 6px at 8% 100%, rgba(121,83,51,.25) 0 41%, transparent 48%) repeat-x bottom,
    radial-gradient(6px 16px at 0% 10%, rgba(255,255,255,.42) 0 42%, transparent 49%) repeat-y left,
    radial-gradient(6px 16px at 100% 12%, rgba(118,79,48,.22) 0 40%, transparent 48%) repeat-y right !important;
  background-size:
    22px 8px,
    8px 24px,
    8px 22px !important;
}


/* v202 — fixed notebook artboard + approved top curve */
#journal-artboard{
  width:1440px !important;
  height:900px !important;
  position:absolute !important;
  overflow:visible !important;
}

#book{
  position:absolute !important;
  left:34px !important;
  top:18px !important;
  width:1380px !important;
  height:863px !important;
  max-width:none !important;
  max-height:none !important;
  transform:none !important;
}

.page-stack{
  position:absolute !important;
  left:12px !important;
  top:9px !important;
  width:1416px !important;
  height:879px !important;
  right:auto !important;
  bottom:auto !important;
  transform:none !important;
  overflow:visible !important;
}

#top-pages-curve{
  position:absolute;
  left:-8px;
  right:-8px;
  top:-28px;
  height:62px;
  pointer-events:none;
  z-index:30;
  overflow:visible;
}

#top-pages-curve svg{
  width:100%;
  height:100%;
  display:block;
  overflow:visible;
}


/* v203 — final approved layered top-to-side notebook edge treatment */
#top-pages-curve{
  height:870px !important;
  overflow:visible !important;
}
#top-pages-curve svg{
  overflow:visible !important;
}


/* v204 */
#top-pages-curve{z-index:29!important;}


/* v205 — decorative pen asset; temporary position, easy to reposition later */
#journal-pen{
  position:absolute;
  right:-52px;
  top:250px;
  width:86px;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
  z-index:40;
  transform:rotate(3deg);
  transform-origin:center center;
  filter:drop-shadow(0 8px 9px rgba(25,18,14,.18));
}


/* v207 — approved pen position */
#journal-pen{
  right:1285px !important;
  top:-75px !important;
  width:250px !important;
}


/* v209 — top-right journal tape asset */
#journal-tape{
  position:absolute;
  right:20px;
  top:-42px;
  width:245px;
  height:auto;
  display:block;
  pointer-events:none;
  user-select:none;
  z-index:42;
  transform:rotate(7deg);
  transform-origin:center center;
  filter:drop-shadow(0 4px 5px rgba(25,18,14,.10));
}


/* v210 — approved journal tape position */
#journal-tape{
  right:-85px !important;
  top:-65px !important;
  width:300px !important;
}