@import url('https://fonts.googleapis.com/css2?family=Anton&family=Bowlby+One&family=Caveat:wght@400;600&family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;0,800;1,500&family=Yellowtail&display=swap');

:root{
  --ink:#1a0f24;
  --purple:#7b2fd0;
  --violet:#a855f7;
  --lilac:#e6d2fd;
  --pink:#ff4fc3;
  --paper:#fbf6ff;
  --glitter:url('assets/violet-glitter.webp');
  --chrome:linear-gradient(180deg,#fff 0%,#f6ecff 36%,#b98be6 50%,#fff2ff 62%,#dcc0f8 100%);
  --candy:linear-gradient(#ffffff,#eadcff 48%,#cdb2f0 52%,#f3eaff);
  --candy-pink:linear-gradient(#ffb3ec,#ff4fc3 48%,#d0169f 52%,#ff85dc);
  --candy-purple:linear-gradient(#d4a4ff,#9a4ae8 48%,#7424cf 52%,#b375f5);
  --burst:polygon(50% 0%,57.1% 9.6%,67.1% 3%,70.5% 14.5%,82.1% 11.7%,81.4% 23.6%,93.3% 25%,88.5% 36%,99.2% 41.3%,91% 50%,99.2% 58.7%,88.5% 64%,93.3% 75%,81.4% 76.4%,82.1% 88.3%,70.5% 85.5%,67.1% 97%,57.1% 90.4%,50% 100%,42.9% 90.4%,32.9% 97%,29.5% 85.5%,17.9% 88.3%,18.6% 76.4%,6.7% 75%,11.5% 64%,0.8% 58.7%,9% 50%,0.8% 41.3%,11.5% 36%,6.7% 25%,18.6% 23.6%,17.9% 11.7%,29.5% 14.5%,32.9% 3%,42.9% 9.6%);
  font-family:'DM Sans',Arial,sans-serif;
  color:#f3e9ff;
  background:#32263c;
  font-synthesis:none;
}
*{box-sizing:border-box}
body{margin:0;min-width:320px;min-height:100vh;background:#32263c url('assets/y2k-pinboard.webp') center/cover fixed}
body:before{content:'';position:fixed;inset:0;pointer-events:none;background:linear-gradient(#170d2444,transparent 27%,transparent 80%,#160d2455);z-index:-1}
button,a{-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}
a{color:inherit;text-underline-offset:4px}
button:focus-visible,a:focus-visible{outline:3px solid #9d69cd;outline-offset:4px}
button:disabled{opacity:.35;cursor:default}
[hidden]{display:none!important}

/* Header and chapter tabs (scrapbook style) */
.site-header{max-width:1450px;margin:auto;padding:24px 45px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.wordmark{display:flex;gap:8px;align-items:center;text-decoration:none;font-family:'Anton','Arial Black',sans-serif;font-size:2.1rem;letter-spacing:-.025em;line-height:1;text-transform:uppercase;color:#ede5f6;text-shadow:2px 3px 0 #2a173a}
.wordmark em{font-family:inherit;font-size:inherit;font-style:normal;letter-spacing:inherit;font-weight:400}
.wordmark span{font-size:1.9rem;margin-left:5px;color:#b692f0}
.social-links{display:flex;gap:12px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.video-link{font-size:.875rem;font-weight:600;text-decoration:none;padding:9px 14px;background:#17131bcc;border:1px solid #b79acb88;transform:rotate(2deg);box-shadow:3px 3px 0 #0003}
.video-link:nth-child(2){transform:rotate(-2deg)}
main{max-width:1200px;margin:0 auto;padding:0 52px}
.intro-line{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:7px 5px 20px;margin-bottom:3px;font-size:.75rem;letter-spacing:.12em;color:#e4d1f6;text-shadow:0 1px 3px #160925}
.intro-line b{margin:0 9px;font-size:1.1rem;font-weight:400}
.chapters{display:flex;justify-content:center;flex-wrap:wrap;gap:7px;margin:0 0 19px}
.chapters button{font-size:.875rem;padding:9px 17px;border-radius:1px;background:#151119;color:#e9dff2;border:1px solid #7e6a8d;box-shadow:2px 3px 0 #0d081e55;transform:rotate(-1deg);transition:box-shadow .2s,color .2s}
.chapters button:nth-child(even){transform:rotate(1deg)}
.chapters button:hover{box-shadow:0 0 0 2px #c7a6f277}
.chapters button.active{background:linear-gradient(#51286a66,#30183f77),var(--glitter) center/280px;color:#fff;border:1px solid #e4d1f6;box-shadow:1px 2px 0 #131016;text-shadow:0 1px 3px #000}

/* Flip book geometry: pages are laid out at 480x680 and scaled by --page-scale from diary.js */
.book-stage{position:relative;height:692px;padding:0;overflow:hidden;isolation:isolate;filter:drop-shadow(0 16px 24px #000b) drop-shadow(0 0 34px #b36bff40)}
.book-shell{position:relative;width:100%!important;max-width:960px!important;height:auto;margin:0 auto!important;transform:none!important}
#book{width:100%!important;max-width:960px!important;height:auto!important;min-width:0!important;min-height:0!important;margin:auto;transition:transform .9s ease;transform:translateX(0)}
.stf__wrapper{height:0!important;padding-bottom:70.833333%!important}
.is-front #book{transform:translateX(-25%)}
.is-back #book{transform:translateX(25%)}
.book-stage.turning .book-shell{transition:none}
.book-stage.zoomed{overflow-x:auto;scrollbar-width:thin;scrollbar-color:#ad87d0 #30233d;--page-scale:1}
.book-stage.zoomed .book-shell{width:960px!important;max-width:none!important;margin-left:0!important}
.book-stage.zoomed.is-front #book,.book-stage.zoomed.is-back #book{transform:none}
.stf__item.--left{border-radius:4px 0 0 4px}
.stf__item.--right{border-radius:0 4px 4px 0}
#book{position:relative}
#book:before,#book:after{content:'';position:absolute;z-index:-1;top:0;width:50%;height:100%;background:#2a1340;transition:opacity .4s}
#book:after{left:50%;border-radius:0 6px 6px 0;box-shadow:1px 1px 0 #eadcbd,2px 2px 0 #f6ecd6,3px 3px 0 #e3d2ae,4px 4px 0 #fbf3e1,5px 5px 0 #eadcbd,6px 6px 0 #cdb27a,7px 7px 0 #e3d2ae,8px 8px 0 #fbf3e1,9px 9px 0 #eadcbd,10px 10px 0 #f6ecd6,11px 11px 0 #e3d2ae,12px 12px 0 #cdb27a,13px 13px 0 #eadcbd,14px 14px 0 #f6ecd6,15px 15px 0 #e3d2ae,16px 16px 0 #fbf3e1,17px 17px 0 #eadcbd,18px 18px 0 #cdb27a,19px 19px 0 #4a2370,20px 20px 0 #3a1b58,21px 21px 0 #2a1340,22px 22px 0 #2a1340,23px 23px 0 #1a0a29,26px 30px 34px #000c}
#book:before{left:0;border-radius:6px 0 0 6px;box-shadow:-1px 1px 0 #eadcbd,-2px 2px 0 #f6ecd6,-3px 3px 0 #e3d2ae,-4px 4px 0 #fbf3e1,-5px 5px 0 #eadcbd,-6px 6px 0 #cdb27a,-7px 7px 0 #e3d2ae,-8px 8px 0 #fbf3e1,-9px 9px 0 #eadcbd,-10px 10px 0 #f6ecd6,-11px 11px 0 #e3d2ae,-12px 12px 0 #cdb27a,-13px 13px 0 #eadcbd,-14px 14px 0 #f6ecd6,-15px 15px 0 #e3d2ae,-16px 16px 0 #fbf3e1,-17px 17px 0 #eadcbd,-18px 18px 0 #cdb27a,-19px 19px 0 #4a2370,-20px 20px 0 #3a1b58,-21px 21px 0 #2a1340,-22px 22px 0 #2a1340,-23px 23px 0 #1a0a29,-26px 30px 34px #000c}
.is-front #book:before,.is-back #book:after{opacity:0}
.mag-cover .page-content:after{content:'';position:absolute;inset:0;z-index:5;pointer-events:none;border-radius:0 4px 4px 0;background:linear-gradient(90deg,#0009 0,#ffffff38 5px,#0006 9px,transparent 26px),linear-gradient(270deg,#ffffff30 0,transparent 3px);box-shadow:inset 0 0 0 1px #ffffff26}

/* Pages */
.page{background:var(--paper);color:#2a1c35;overflow:hidden}
.page.--left{background:linear-gradient(90deg,#f6eefd,#fdf9ff 70%,#eadcf6 94%,#b9a2cc)}
.page.--right{background:linear-gradient(90deg,#c3acd6,#fdf9ff 7%,#f4ebfc)}
.page:not(.cover-page):before{content:'';position:absolute;inset:0 0 auto;height:10px;background:var(--glitter) center/250px;filter:saturate(1.3) contrast(1.1);z-index:8}
.page:after{content:'';position:absolute;inset:0;pointer-events:none;z-index:9;background:linear-gradient(115deg,transparent 28%,#ffffff40 40%,transparent 50%,transparent 70%,#ffffff26 78%,transparent 86%)}
.page[aria-hidden="true"] a,.page[aria-hidden="true"] button{pointer-events:none}
.page-content{position:absolute;top:0;left:0;width:480px!important;height:680px!important;transform:scale(var(--page-scale,1));transform-origin:top left;display:flex;flex-direction:column;overflow:hidden;padding:30px 34px 22px}
.book-stage.zoomed .page-content{width:var(--reading-width,480px)!important}
.page-header{position:relative;z-index:6;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:.68rem;font-weight:700;letter-spacing:.14em;color:#7b4fa3;padding-bottom:10px;border-bottom:2px solid #1a0f24}
.section-tag{font-family:'Anton',sans-serif;font-weight:400;font-size:.85rem;letter-spacing:.1em;color:#fff;background:var(--ink);padding:4px 10px 5px;transform:rotate(-2deg);box-shadow:3px 3px 0 var(--pink)}
.page h2{position:relative;z-index:4;max-width:300px;margin:18px 0 14px;font-family:'Anton',sans-serif;font-weight:400;font-size:2.9rem;line-height:.98;text-transform:uppercase;letter-spacing:.005em;color:var(--ink);text-shadow:3px 3px 0 #e2b3ff}
.entry-copy{position:relative;z-index:4;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#cdb8df transparent;font-size:.9rem;line-height:1.6;color:#2a1c35}
.entry-copy p{margin:0 0 11px}
.entry-copy a{font-size:.82rem;font-weight:700;color:#8b2fd6}
.signoff{font-family:'Caveat','Segoe Print',cursive;font-size:1.9rem!important;line-height:1.1!important;text-align:right;color:#a13dc9;transform:rotate(-4deg);margin:10px 4px 8px!important}
.small-note{font-size:.82rem;line-height:1.5;color:#6d4a8a}
.page-footer{position:relative;z-index:6;display:flex;justify-content:space-between;gap:16px;margin-top:auto;padding-top:10px;border-top:1px solid #d7bfee;font-size:.66rem;font-weight:700;letter-spacing:.14em;color:#8a67a8}

/* Stickers, starbursts, polaroids */
.sticker{position:absolute;height:auto;z-index:5;filter:drop-shadow(2px 4px 3px #2b1d3566);transition:transform .25s ease}
.sticker:hover{transform:rotate(0) scale(1.08)!important}
.burst{position:absolute;top:56px;right:18px;z-index:7;width:108px;height:108px;display:grid;place-items:center;transform:rotate(12deg);filter:drop-shadow(3px 4px 0 var(--ink))}
.burst:before{content:'';position:absolute;inset:0;clip-path:var(--burst);background:radial-gradient(circle at 35% 30%,#ffd6f5,var(--pink) 45%,#a0169f 100%)}
.burst span{position:relative;font-family:'Anton',sans-serif;font-size:1.05rem;line-height:1.02;letter-spacing:.02em;text-transform:uppercase;text-align:center;color:#fff;text-shadow:1px 1px 0 #6a0f7a}
.snap{position:relative;z-index:3;margin:0;padding:7px 7px 26px;background:#fff;box-shadow:0 0 0 1px #e2d0f2,4px 6px 0 #1a0f2422,0 8px 18px #2b103f33}
.snap:before{content:'';position:absolute;top:-9px;left:50%;width:62px;height:18px;margin-left:-31px;background:var(--glitter) center/120px;opacity:.9;transform:rotate(-3deg);box-shadow:0 1px 2px #0003}
.snap img,.snap .ph{display:block;width:100%;height:var(--ph-h,130px);object-fit:cover}
.snap figcaption{position:absolute;left:0;right:0;bottom:3px;padding:0 6px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:'Caveat',cursive;font-size:1.1rem;color:#6a3d91}
.ph{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:3px;background:repeating-linear-gradient(135deg,#f5eaff 0 10px,#ecdcfc 10px 20px);border:2px dashed #b27ce6;color:#8a4fc4;font-size:.62rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.ph-icon{font-size:1.4rem;line-height:1;color:#d36bf0}
.snap-wide{--ph-h:132px;transform:rotate(-1.5deg)}
.snap-tall{--ph-h:196px}
.snaps-3{display:flex;gap:12px;justify-content:center;margin:6px 0 18px}
.snaps-3 .snap{width:118px;--ph-h:92px;padding-bottom:24px}
.snaps-3 .snap:nth-child(1){transform:rotate(-5deg)}
.snaps-3 .snap:nth-child(2){transform:rotate(3deg) translateY(6px)}
.snaps-3 .snap:nth-child(3){transform:rotate(-2deg)}

/* Entry-specific layouts */
.entry-0 .snaps{margin:2px 8px 16px}
.entry-0 .entry-copy{column-count:2;column-gap:22px;overflow:visible}
.entry-0 .entry-copy p{break-inside:avoid}
.entry-0 .page-sticker{width:92px;right:12px;top:250px;transform:rotate(12deg)}
.entry-1 .page-sticker{width:62px;left:12px;bottom:36px;transform:rotate(-14deg)}
.entry-1 .signoff{margin-right:10px!important}
.entry-2 .snaps{position:absolute;z-index:3;right:30px;top:200px;width:158px;transform:rotate(3deg)}
.entry-2 .entry-copy{margin-right:176px}
.entry-2 .page-sticker{width:78px;right:12px;top:178px;transform:rotate(16deg)}
.entry-3 .page-sticker{width:104px;right:10px;top:318px;transform:rotate(10deg)}
.week{display:grid;gap:3px;margin:4px 0 12px}
.week div{display:flex;align-items:center;gap:14px;padding:6px 0;border-bottom:1px dashed #c9a6ea;font-size:.95rem;font-weight:600;color:#2a1c35}
.week b{min-width:50px;text-align:center;font-family:'Anton',sans-serif;font-weight:400;font-size:.8rem;letter-spacing:.08em;color:#fff;background:linear-gradient(#b86cff,#7b2fd0);border-radius:999px;padding:3px 0 4px;box-shadow:inset 0 1px 0 #fff7}
.week div:nth-child(odd) b{background:linear-gradient(#ff8fe0,#e02fb0)}

/* Collage page: coordinates assume the fixed 480x680 page */
.chaos{position:absolute;inset:0;z-index:1}
.chaos-photo{position:absolute;left:108px;top:112px;width:264px;margin:0;padding:10px 10px 38px;background:#fff;border:1px solid #cbb9d6;box-shadow:6px 8px 0 #2b1d3544,0 10px 24px #2b1d3533;transform:rotate(-3deg);z-index:2}
.chaos-photo:before{content:'';position:absolute;top:-14px;left:50%;width:96px;height:28px;margin-left:-48px;background:var(--glitter) center/160px;opacity:.9;transform:rotate(4deg);box-shadow:0 1px 2px #0003}
.chaos-photo img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 30%;border:1px solid #d9cde2}
.s-purse-sparkle{width:124px;left:2px;top:128px;transform:rotate(-14deg)}
.s-lipstick{width:92px;right:18px;top:70px;transform:rotate(16deg)}
.s-palette{width:120px;left:-4px;top:318px;transform:rotate(9deg)}
.s-purse-black{width:118px;right:-2px;top:262px;transform:rotate(10deg)}
.s-heel{width:158px;left:22px;top:432px;transform:rotate(-10deg);z-index:4}
.s-platform{width:142px;right:20px;top:440px;transform:rotate(-7deg);z-index:4}
.chaos-title{position:absolute;left:40px;top:64px;margin:0;padding:10px 16px 12px;background:var(--ink);color:#f1e2ff;font-family:'Anton',sans-serif;font-size:2.35rem;line-height:.95;text-transform:uppercase;letter-spacing:.01em;text-shadow:2px 2px 0 var(--pink);transform:rotate(-7deg);clip-path:polygon(0 6%,97% 0,100% 90%,3% 100%);box-shadow:4px 4px 0 #0004;z-index:5}
.chaos-title span{display:block;font-family:'Yellowtail',cursive;font-size:1.9rem;text-transform:none;letter-spacing:0;color:#ff8fe0;text-shadow:none;margin-top:2px}
.chaos-note{position:absolute;left:0;right:0;bottom:46px;margin:0;text-align:center;font-family:'Caveat','Segoe Print',cursive;font-size:1.65rem;color:#7b3fa8;transform:rotate(-2deg);z-index:5}
.chaos-note b{font-weight:600;color:var(--ink)}

/* Last page */
.ending{text-align:center}
.ending h2{max-width:none;margin:22px 0 14px}
.ending h2 em{display:block;font-family:'Yellowtail',cursive;font-style:normal;text-transform:none;font-size:3.3rem;line-height:1.05;color:var(--pink);text-shadow:2px 2px 0 #e2b3ff}
.ending .snap{margin:4px 44px 16px}
.pill-links{display:flex;flex-direction:column;align-items:center;gap:9px;margin:4px 0 2px}
.entry-copy a.pill{display:inline-block;text-decoration:none;font-size:.8rem;font-weight:800;color:#fff;padding:8px 18px;border-radius:999px;border:1px solid #ecd4ff;background:var(--candy-purple);box-shadow:inset 0 1px 0 #fff9,0 3px 8px #7b2fd044;text-shadow:0 1px 0 #4b1a80}
.entry-copy a.pill:nth-child(2){background:var(--candy-pink);border-color:#ffe0f7;text-shadow:0 1px 0 #7a0a5c}
.ending .signoff{text-align:center}
.end-star{width:72px;left:16px;bottom:40px;transform:rotate(-12deg)}

/* Magazine cover */
.page.cover-page{background:#1a0b29;color:#fff}
.mag-cover .page-content{padding:0}
.cover-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:48% 40%;filter:saturate(1.2) contrast(1.05) brightness(1.15)}
.cover-art{position:absolute;inset:0;transition:filter 1.1s ease,transform 1.1s ease}
#stage:not(.revealing):not(.unlocked) .cover-art{filter:blur(12px) brightness(.8) saturate(1.3);transform:scale(1.04)}
.cover-art:before{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,#1b0630f0 0%,#2a0b4aa6 27%,transparent 44%,transparent 58%,#1b0630cc 84%,#12031ff2 100%),radial-gradient(ellipse at 50% 45%,transparent 40%,#4a118a66 100%)}
.cover-art:after{content:'';position:absolute;inset:0;z-index:1;background:linear-gradient(135deg,#b44dff38,transparent 45%,#ff4fc32e);mix-blend-mode:screen;pointer-events:none}
.cover-art>*:not(.cover-photo){z-index:3}
.cover-strip{position:absolute;top:14px;left:18px;right:18px;display:flex;justify-content:space-between;padding-bottom:6px;border-bottom:1px solid #ffffff66;font-size:.6rem;font-weight:800;letter-spacing:.2em;color:#f3e3ff}
.masthead{position:absolute;top:30px;left:14px;margin:0;font-family:'Bowlby One','Arial Black',sans-serif;font-weight:400;font-size:150px;line-height:.9;letter-spacing:-.02em;background:var(--chrome);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(4px 5px 0 #6a1fb0) drop-shadow(0 0 18px #d58bff99)}
.masthead span{position:absolute;left:150px;top:78px;font-family:'Yellowtail',cursive;font-size:80px;letter-spacing:0;white-space:nowrap;-webkit-text-fill-color:#ff6fd8;-webkit-text-stroke:2px #fff;transform:rotate(-8deg)}
.coverlines{position:absolute;color:#fff;text-shadow:0 2px 6px #12031f}
.cl-left{left:20px;top:262px;width:178px}
.cl-right{right:18px;top:308px;width:130px;text-align:right}
.cl{margin:0 0 12px;font-size:.8rem;font-weight:600;line-height:1.3}
.cl b{display:table;margin-bottom:3px;padding:1px 7px 2px;font-family:'Anton',sans-serif;font-weight:400;font-size:1.2rem;letter-spacing:.02em;text-transform:uppercase;text-shadow:none;color:#fff;background:var(--pink);box-shadow:2px 2px 0 var(--ink);transform:rotate(-2deg)}
.cl-right .cl b{margin-left:auto;color:#6a1fb0;background:#fff;transform:rotate(2deg)}
.cl-big{margin-bottom:16px;font-family:'Anton',sans-serif;font-weight:400;font-size:2.3rem;line-height:.95;text-transform:uppercase}
.cl-big em{display:block;margin-top:2px;font-family:'Yellowtail',cursive;font-style:normal;font-size:3.1rem;line-height:1;text-transform:none;color:#ff7ad9;-webkit-text-stroke:1px #fff}
.cover-burst{top:180px;right:14px;width:118px;height:118px;transform:rotate(14deg)}
.cover-disco{width:72px;top:34px;right:16px;transform-origin:top center;animation:sway 4s ease-in-out infinite alternate}
.cover-star{width:58px;right:150px;bottom:74px;transform:rotate(-14deg)}
.cover-bottom{position:absolute;left:18px;right:18px;bottom:18px;display:flex;justify-content:space-between;align-items:flex-end}
.open-cover{font-size:.85rem;font-weight:800;color:#fff;padding:10px 20px;border:1px solid #ffe0f7;border-radius:999px;background:var(--candy-pink);text-shadow:0 1px 0 #7a0a5c;box-shadow:0 4px 14px #ff4fc366,inset 0 1px 0 #fff9;transition:transform .2s}
.open-cover:hover{transform:scale(1.05) rotate(-2deg)}
.barcode{position:relative;display:block;width:92px;height:46px;padding:5px 6px 13px;background:#fff}
.barcode:before{content:'';display:block;height:100%;background:repeating-linear-gradient(90deg,#111 0 2px,#fff 2px 3px,#111 3px 4px,#fff 4px 7px,#111 7px 10px,#fff 10px 11px)}
.barcode:after{content:'0 26092 01';position:absolute;left:0;right:0;bottom:1px;text-align:center;font-size:8px;letter-spacing:.12em;color:#111}

/* Back cover */
.page.cover-page.back-cover{background:linear-gradient(#2a0b47d0,#14041fe0),var(--glitter) center/cover}
.back-cover .page-content{align-items:center;justify-content:center;gap:14px;text-align:center}
.back-disco{position:relative;width:150px;transform-origin:top center;animation:sway 5s ease-in-out infinite alternate}
.back-cover .masthead{position:relative;top:auto;left:auto;font-size:96px;margin-right:60px}
.back-cover .masthead span{left:96px;top:48px;font-size:54px}
.back-line{margin:30px 0 4px;font-family:'Caveat',cursive;font-size:2rem;color:#f5dcff;transform:rotate(-3deg)}
.back-cover .barcode{position:absolute;right:26px;bottom:24px}

/* Diary clasp: strap wraps round the fore-edge, the heart lock's shackle threads under a chrome loop.
   Positioned inside #book (the cover is its right half) in page units (--s), so it moves with the book. */
.book-stage{--s:var(--book-scale,1)}
.lock-strap{position:absolute;z-index:16;left:calc(75% + 110px*var(--s));top:calc(50% - 65px*var(--s));width:calc(130px*var(--s) + 24px);height:calc(61px*var(--s));border:2px solid #d8c2f2;border-right:0;border-radius:calc(30px*var(--s)) 8px 8px calc(30px*var(--s));background:linear-gradient(90deg,transparent calc(100% - 22px),#0000 calc(100% - 22px),#00000080 calc(100% - 8px),#ffffff40 calc(100% - 3px),#0009),linear-gradient(#ffffff55,transparent 45%,#0000004d),var(--glitter) center/140px;box-shadow:0 6px 12px #0008,inset 0 0 0 3px #ffffff22;pointer-events:none}
.lock-strap:after{content:'';position:absolute;inset:calc(7px*var(--s)) 22px calc(7px*var(--s)) calc(9px*var(--s));border:1.5px dashed #ffffffaa;border-right:0;border-radius:calc(24px*var(--s)) 0 0 calc(24px*var(--s))}
.lock-staple{position:absolute;z-index:18;left:calc(75% + 134px*var(--s));top:calc(50% - 54px*var(--s));pointer-events:none;width:calc(73px*var(--s));height:calc(38px*var(--s));padding:calc(8px*var(--s));border-radius:calc(9.5px*var(--s));filter:drop-shadow(2px 4px 3px #0009)}
.lock-staple:before{content:'';position:absolute;inset:0;padding:inherit;border-radius:inherit;background:linear-gradient(115deg,#8e8aa0,#fff 28%,#c9c4d8 50%,#fff 68%,#7a7590);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.lock-strap.is-dropping,.lock-staple.is-dropping{animation:strapOff .55s ease-in forwards}

.hanging-lock{position:absolute;z-index:17;left:calc(75% + 120px*var(--s));top:calc(50% - 39px*var(--s));width:calc(130px*var(--s));pointer-events:none}
.lock-swing{position:relative;transform-origin:38.5% 13.6%;will-change:transform}
.lock-swing img{display:block;width:100%;height:auto;filter:drop-shadow(3px 8px 6px #000a) drop-shadow(0 0 8px #e3b8ff66)}
.lock-open{position:absolute;inset:0;opacity:0}
.lock-swing.is-3d img{visibility:hidden}
.lock-canvas{position:absolute;pointer-events:none;filter:drop-shadow(3px 8px 6px #000a) drop-shadow(0 0 8px #e3b8ff55)}
.hanging-lock.is-open .lock-open{opacity:1}
.hanging-lock.is-open .lock-closed{opacity:0}
.keyhole{position:absolute;left:33%;top:57%;width:12%;height:20%}
.lock-sparkle{position:absolute;left:-30%;top:10%;width:140%;aspect-ratio:1;opacity:0;transform:scale(.2);background:radial-gradient(circle at 50% 8%,#fff 0 3px,transparent 4px),radial-gradient(circle at 92% 40%,#ffd6f5 0 3px,transparent 4px),radial-gradient(circle at 8% 45%,#fff 0 2.5px,transparent 3.5px),radial-gradient(circle at 78% 88%,#e9c9ff 0 3px,transparent 4px),radial-gradient(circle at 20% 88%,#fff 0 2px,transparent 3px),radial-gradient(circle,#ffb3f0aa,transparent 60%)}
.hanging-lock.is-open .lock-sparkle{animation:sparkleBurst .7s ease-out forwards}
.hanging-lock.is-dropping{animation:lockDrop .7s ease-in forwards}
.unlocked .lock-strap,.unlocked .lock-staple,.unlocked .hanging-lock{display:none}

/* The key that unlocks it */
.lock-shield{position:absolute;inset:0;z-index:15;cursor:not-allowed}
.unlock-key{position:absolute;z-index:20;perspective:700px;top:calc(50% - 60px*var(--book-scale,1));left:min(calc(50% + 250px*var(--book-scale,1) + 38px),calc(100% - max(100px,195px*var(--book-scale,1)) - 6px));width:max(100px,calc(195px*var(--book-scale,1)));padding:0;animation:keyPop .9s cubic-bezier(.3,1.6,.5,1) .7s both}
.unlock-key:before{content:'';position:absolute;inset:-25% 5% 5%;border-radius:50%;background:radial-gradient(circle,#ffb3f066,transparent 65%);animation:glowPulse 1.6s ease-in-out infinite}
/* three.js key (key3d.js) draws into a canvas that overflows the key box so the spin and charms aren't cropped */
.key-body{position:relative;display:block;transform-origin:1% 46%}
.key-tilt{display:block}
.key-3d{position:relative;display:block;aspect-ratio:640/216}
.key-fallback{display:block;width:100%;height:auto;filter:drop-shadow(0 0 12px #e3b8ff)}
.key-3d.is-3d .key-fallback{display:none}
.key-canvas{position:absolute;pointer-events:none;filter:drop-shadow(0 0 6px #e3b8ff55) drop-shadow(0 8px 8px #0008);transition:filter .3s}
.unlock-key:hover .key-canvas{filter:drop-shadow(0 0 14px #ffc6f3aa) drop-shadow(0 8px 8px #0008)}
.key-hint{position:absolute;left:0;right:0;top:100%;margin-top:calc(max(100px,195px*var(--book-scale,1))*.42);text-align:center;white-space:nowrap;font-family:'Caveat',cursive;font-size:max(1rem,calc(1.5rem*var(--book-scale,1)));color:#ffc2ee;text-shadow:0 2px 6px #12031f;animation:bob 1.6s ease-in-out infinite alternate}
.unlock-key.is-nudged{animation:keyNudge .6s ease}
.unlock-key.is-flying:before,.unlock-key.is-flying .key-hint{display:none}
.unlock-key.is-flying{perspective:none}

/* Controls under the book */
.reader-options{display:flex;justify-content:center;gap:18px;min-height:28px;margin-top:10px}
.reader-options button{color:#e5d1f4;font-size:.75rem;text-decoration:underline;text-underline-offset:4px;background:#21132fc9;padding:5px 9px}
.controls{max-width:710px;display:flex;justify-content:space-between;align-items:center;gap:20px;margin:8px auto 0}
.chrome-button{display:flex;align-items:center;gap:16px;min-width:105px;justify-content:center;padding:10px 17px;border-radius:3px;background:linear-gradient(#f5edf8,#b2a7bc 47%,#e1d6ea 50%,#d9cedf);color:#3e2b50;border:1px solid #c2b4ce;box-shadow:3px 3px 0 #10061d66;font-size:.875rem}
.chrome-button:not(:disabled):hover{box-shadow:0 2px 12px #a884c555}
.page-tools{text-align:center;min-width:120px;display:flex;flex-direction:column;gap:5px;font-size:.75rem;letter-spacing:.1em;color:#e3cff1;text-shadow:0 1px 2px #160b26}
.page-tools button{font-size:.875rem;letter-spacing:0;color:#e3cff1}
.helper{text-align:center;color:#e4d4ee;font-size:.8rem;margin:12px 0 5px;text-shadow:0 1px 3px #140620}
.secondary-tools{display:flex;justify-content:center;gap:23px;min-height:34px;margin-top:9px}
.secondary-tools button{font-size:.75rem;text-decoration:underline;text-underline-offset:4px;color:#d5bbe8;background:#21132f88;padding:4px 7px}
footer{display:flex;justify-content:space-between;gap:20px;max-width:1420px;margin:6px auto 0;padding:19px 42px;font-size:.75rem;letter-spacing:.06em;color:#d0b7e2;background:#180d2580;border-top:1px solid #7d659755;text-shadow:0 1px 2px #160b26}
.no-script{text-align:center}

@keyframes sway{from{transform:rotate(-5deg)}to{transform:rotate(5deg)}}
@keyframes bob{from{transform:rotate(-14deg) translateY(0)}to{transform:rotate(-8deg) translateY(-12px)}}
@keyframes keyPop{from{opacity:0;transform:translateY(90px) scale(.2) rotate(-40deg)}70%{opacity:1;transform:translateY(-12px) scale(1.12) rotate(8deg)}to{opacity:1;transform:none}}
@keyframes keyNudge{0%,100%{transform:none}30%{transform:scale(1.15) rotate(-8deg)}60%{transform:scale(1.05) rotate(6deg)}}
@keyframes glowPulse{from{opacity:.5;transform:scale(.9)}to{opacity:1;transform:scale(1.08)}}
@keyframes lockShake{0%,100%{transform:rotate(0)}20%{transform:rotate(-14deg)}40%{transform:rotate(11deg)}60%{transform:rotate(-7deg)}80%{transform:rotate(4deg)}}
@keyframes lockDrop{to{transform:translateY(240px) rotate(38deg);opacity:0}}
@keyframes strapOff{to{transform:translateX(130px);opacity:0}}
@keyframes sparkleBurst{0%{opacity:0;transform:scale(.2)}40%{opacity:1}100%{opacity:0;transform:scale(1.6) rotate(25deg)}}

@media(max-width:799px){
  body{background-position:left top}
  main{padding:0 18px}
  .site-header{padding:19px 20px}
  .wordmark{font-size:1.65rem}
  .video-link{font-size:.75rem}
  .intro-line{justify-content:center;font-size:.66rem;padding:5px 0 17px}
  .intro-line span:last-child{display:none}
  .chapters{gap:5px;margin-bottom:16px}
  .chapters button{font-size:.8rem;padding:8px 11px}
  .controls{gap:10px}
  .chrome-button{min-width:88px;font-size:.8rem}
  .helper{font-size:.75rem}
  .reader-options{gap:10px}
  footer{font-size:.65rem;padding:15px 18px}
  .unlock-key{top:calc(50% + 150px*var(--book-scale,1))}
  .key-hint{display:none}
}
@media(max-width:390px){
  main{padding:0 14px}
  .site-header{padding:16px}
  .intro-line{font-size:.64rem;letter-spacing:.09em}
  .chrome-button{min-width:89px;gap:8px;padding:10px 12px}
  .page-tools{min-width:95px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important;animation:none!important}
  #book{transition:none}
}

/* Interior palette: plum ink, silver paper and muted lilac.
   Scoped to the inside pages so the cover and key stay untouched. */
.page:not(.cover-page){
  --ink:#241b2c;
  --purple:#61416f;
  --violet:#9279a3;
  --lilac:#d8cce2;
  --pink:#62446f;
  --paper:#e9e6ed;
  --candy-purple:linear-gradient(#80618d,#62436f 48%,#412b4d 52%,#72527e);
  --candy-pink:linear-gradient(#f4f3f6,#d2cdd8 48%,#a39aaE 52%,#e4dfe9);
  color:var(--ink);
}
.page:not(.cover-page).--left{background:linear-gradient(90deg,#e5e1e9,#f0edf2 70%,#d7d0df 94%,#a396b0)}
.page:not(.cover-page).--right{background:linear-gradient(90deg,#ada0b9,#f0edf2 7%,#e4dfe9)}
.page:not(.cover-page) .page-header{color:#655370;border-color:#35283e}
.page:not(.cover-page) h2{color:#241b2c;text-shadow:3px 3px 0 #cfc3da}
.page:not(.cover-page) .section-tag{box-shadow:3px 3px 0 #b6a6c5}
.page:not(.cover-page) .entry-copy{color:#302536;scrollbar-color:#ab98bb transparent}
.page:not(.cover-page) .entry-copy a{color:#62416f}
.page:not(.cover-page) .signoff{color:#684b79}
.page:not(.cover-page) .small-note{color:#62516e}
.page:not(.cover-page) .page-footer{color:#6f5b7e;border-color:#bdb0c9}
.page:not(.cover-page) .burst:before{background:radial-gradient(circle at 35% 30%,#92779f,#61416f 45%,#34223f 100%)}
.page:not(.cover-page) .burst span{text-shadow:1px 1px 0 #28182f}
.page:not(.cover-page) .ph{background:repeating-linear-gradient(135deg,#e8e3ee 0 10px,#dbd4e2 10px 20px);border-color:#a18bad;color:#655171}
.page:not(.cover-page) .ph-icon{color:#8b719c}
.page:not(.cover-page) .snap{background:#f4f2f6;box-shadow:0 0 0 1px #c8bdd2,4px 6px 0 #241b2c22,0 8px 18px #241b2c22}
.page:not(.cover-page) .snap figcaption{color:#614b71}
.page:not(.cover-page) .week div{border-color:#b5a5c3;color:#302536}
.page:not(.cover-page) .week b{background:var(--candy-purple)}
.page:not(.cover-page) .week div:nth-child(odd) b{background:var(--candy-pink);color:#35283e}
.chaos-title{color:#eee8f4;text-shadow:2px 2px 0 #756083}
.chaos-title span{color:#cbb8dc}
.chaos-note{color:#684e78}
.ending h2 em{color:#684477;text-shadow:2px 2px 0 #d1c5dc}
.page:not(.cover-page) .entry-copy a.pill{color:#fff;border-color:#bcacca;text-shadow:0 1px 0 #35223f;box-shadow:inset 0 1px 0 #fff7,0 3px 8px #34223f33}
.page:not(.cover-page) .entry-copy a.pill:nth-child(2){color:#35283e;border-color:#bbb1c5;text-shadow:0 1px 0 #fff}
.page:not(.cover-page) .sticker{filter:saturate(.48) drop-shadow(2px 4px 3px #2b1d3566)}