/* Charlee's Book: all rules scoped under .cb so nothing leaks into the site. */
/* Layout: a Crow-black cloth book resting on the Dove page of the site. One spread at a time, leaves turn on a 3D spine.
   Brand rule: the five stripe colors only ever appear together. Single light look by choice. */
.cb{
  --crow:#020202;
  --dove:#F7F7FF;
  --catbird:#A7A7A7;
  --paper:#FDFDFF;
  --paper-edge:#E3E3EC;
  --pencil:#5C5C66;
  --s1:#DF373B; --s2:#FAE04E; --s3:#3E77F7; --s4:#57BC5C; --s5:#EA3370;
  --stripe:linear-gradient(90deg,var(--s1) 0 20%,var(--s2) 20% 40%,var(--s3) 40% 60%,var(--s4) 60% 80%,var(--s5) 80% 100%);
  --coffee:#B24E2C;
  --f-body:"Courier Prime","Courier New",Courier,monospace;
  --f-hand:"Caveat","Segoe Print","Bradley Hand",cursive;
  --f-ui:"Inter",system-ui,sans-serif;
  color-scheme:light;
}
.cb{color:var(--crow);font-family:var(--f-body);font-size:14px;line-height:1.4;width:100%}
.cb *,.cb *::before,.cb *::after{box-sizing:border-box}
.cb .cb-wrap{display:flex;flex-direction:column;align-items:center;gap:20px;padding-block:24px 28px;padding-inline:16px;box-sizing:border-box}
.cb .hint{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:-.04em;color:var(--pencil);margin:0;text-align:center}
.cb .stage{position:relative;width:100%;max-width:820px}
.cb .stage.single{overflow:hidden}
.cb .book{position:absolute;left:50%;top:0;width:720px;height:500px;margin-left:-360px;transform-origin:50% 0;
  transition:transform .8s cubic-bezier(.645,.045,.355,1);perspective:2400px}
.cb .leaf{position:absolute;left:50%;top:0;width:360px;height:500px;transform-origin:left center;transform-style:preserve-3d;
  transition:transform 1s cubic-bezier(.645,.045,.355,1)}
.cb .leaf.flipped{transform:rotateY(-180deg)}
.cb .face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;overflow:hidden;box-sizing:border-box}
.cb .face.back{transform:rotateY(180deg)}

/* paper */
.cb .paper{background-color:var(--paper);color:var(--crow);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .3  0 0 0 0 .3  0 0 0 0 .38  0 0 0 .06 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  padding:30px 30px 24px;display:flex;flex-direction:column;gap:12px}
.cb .front.paper{border-radius:0 4px 4px 0;box-shadow:inset 18px 0 22px -14px rgba(20,20,40,.22),2px 3px 0 var(--paper-edge),4px 10px 24px rgba(20,20,40,.12)}
.cb .back.paper{border-radius:4px 0 0 4px;box-shadow:inset -18px 0 22px -14px rgba(20,20,40,.22),-2px 3px 0 var(--paper-edge),-4px 10px 24px rgba(20,20,40,.12)}

.cb .runhead{display:flex;justify-content:space-between;font-family:var(--f-body);font-style:italic;font-size:12px;color:var(--pencil)}
.cb .folio{margin-top:auto;text-align:center;font-family:var(--f-body);font-size:12px;color:var(--pencil)}
.cb h2{font-family:var(--f-body);font-weight:700;font-size:23px;line-height:1.15;margin:4px 0 0;text-wrap:balance}
.cb .mark{background:var(--stripe) no-repeat left bottom/100% 4px;padding-bottom:3px}
.cb .tw{font-size:13.5px;line-height:1.55;margin:0}
.cb .tw .ghost{color:transparent}
.cb .tw .caret{display:inline-block;width:.55em;height:1.05em;margin-bottom:-.2em;background:var(--crow);animation:cb-blink .8s steps(1) infinite}
@keyframes cb-blink{50%{opacity:0}}
.cb .note{font-family:var(--f-hand);font-size:19px;line-height:1.1;color:var(--pencil);margin:0;transform:rotate(-1.5deg)}
.cb .small{font-size:11.5px;color:var(--pencil);margin:0}
.cb canvas{display:block;width:100%;touch-action:manipulation;cursor:pointer}
.cb .box{border:1.5px dashed var(--catbird);border-radius:3px;padding:6px}

.cb button{font:inherit;cursor:pointer;color:inherit}
.cb .tbtn{font-family:var(--f-body);font-weight:700;font-size:14px;color:var(--dove);background:var(--crow);
  border:none;padding:8px 12px;border-radius:2px;box-shadow:3px 3px 0 var(--catbird);transition:transform .12s,box-shadow .12s;
  background-image:var(--stripe);background-size:0 3px;background-repeat:no-repeat;background-position:left bottom;text-decoration:none;display:inline-block}
.cb .tbtn:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--catbird);background-size:100% 3px;transition:transform .12s,box-shadow .12s,background-size .3s}
.cb .tbtn:active{transform:translate(2px,2px);box-shadow:0 0 0 var(--catbird)}
.cb .tbtn.ghostbtn{background-color:transparent;color:var(--crow);border:1.5px solid var(--crow);box-shadow:3px 3px 0 var(--catbird)}
.cb :focus-visible{outline:2px dashed var(--s3);outline-offset:3px}
.cb .row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.cb input.line{font-family:var(--f-body);font-size:16px;color:var(--crow);background:transparent;border:none;border-bottom:1.5px solid var(--crow);padding:4px 2px;flex:1;min-width:0}
.cb input.line::placeholder{color:var(--pencil);opacity:.7}
.cb input.line:focus{outline:none;border-image:var(--stripe) 1;border-bottom-width:2px}

/* dog-ear corners */
.cb .corner{position:absolute;bottom:0;width:46px;height:46px;border:none;padding:0;background:transparent;z-index:5}
.cb .front .corner{right:0}
.cb .back .corner{left:0}
.cb .corner::before{content:"";position:absolute;inset:0;transition:transform .25s}
.cb .front .corner::before{background:linear-gradient(315deg,transparent 50%,var(--paper-edge) 50%,#cfcfdb 100%);clip-path:polygon(100% 40%,100% 100%,40% 100%);transform-origin:100% 100%}
.cb .back .corner::before{background:linear-gradient(45deg,transparent 50%,var(--paper-edge) 50%,#cfcfdb 100%);clip-path:polygon(0 40%,0 100%,60% 100%);transform-origin:0 100%}
.cb .corner:hover::before{transform:scale(1.5)}

/* cloth covers */
.cb .cloth{background-color:var(--crow);color:var(--dove);
  background-image:
   repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),
   repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),
   radial-gradient(ellipse at 62% 30%,rgba(255,255,255,.09),transparent 60%),
   linear-gradient(90deg,rgba(255,255,255,.05) 0 15px,rgba(255,255,255,.12) 16px,transparent 18px);
  border-radius:3px 6px 6px 3px;box-shadow:6px 12px 30px rgba(10,10,30,.35);cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:space-between;text-align:center;padding:42px 36px 44px 50px}
.cb .cloth::after{content:"";position:absolute;left:0;right:0;bottom:18px;height:7px;background:var(--stripe)}
.cb .cloth.back{border-radius:6px 3px 3px 6px;cursor:default;padding:42px 50px 44px 36px;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.035) 0 1px,transparent 1px 3px),repeating-linear-gradient(90deg,rgba(255,255,255,.025) 0 1px,transparent 1px 3px),linear-gradient(270deg,rgba(255,255,255,.05) 0 15px,rgba(255,255,255,.12) 16px,transparent 18px)}
.cb .deboss{text-shadow:0 -1px 0 rgba(0,0,0,.9),0 1px 0 rgba(255,255,255,.12)}
.cb .cover-logo{height:20px;width:auto;opacity:.92}
.cb .cover-title{font-family:var(--f-ui);font-size:62px;line-height:.95;margin:0;font-weight:600;letter-spacing:-.04em}
.cb .cover-sub{font-family:var(--f-body);font-size:18px;line-height:1.4;margin:12px 0 0;color:var(--catbird)}
.cb .cover-sub b{font-weight:400;color:var(--dove)}
.cb .cover-cta{font-family:var(--f-hand);font-size:22px;color:var(--dove);opacity:.8;margin:0;animation:cb-nudge 2.4s ease-in-out infinite}
@keyframes cb-nudge{0%,100%{transform:translateX(0)}50%{transform:translateX(6px)}}
.cb .leaf:first-child:not(.flipped):hover{transform:rotateY(-9deg)}

/* polaroid */
.cb .pola-wrap{perspective:900px;align-self:center;margin-top:4px}
.cb .pola{position:relative;width:200px;height:224px;transform-style:preserve-3d;transition:transform .7s cubic-bezier(.4,1.3,.5,1);transform:rotate(-3deg);border:none;padding:0;background:none}
.cb .pola.over{transform:rotate(2deg) rotateY(180deg)}
.cb .pola .side{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#fff;box-shadow:0 2px 3px rgba(0,0,0,.12),0 8px 18px rgba(20,20,40,.14);
  padding:10px 10px 0;box-sizing:border-box;display:flex;flex-direction:column;align-items:center}
.cb .pola .side.rev{transform:rotateY(180deg);justify-content:center;padding:18px;background:#fafafa}
.cb .pola img{width:180px;height:157px;object-fit:cover;display:block;filter:contrast(1.05)}
.cb .pola .cap{font-family:var(--f-hand);font-size:24px;line-height:1;margin-top:12px;color:var(--crow)}
.cb .pola .rev p{font-family:var(--f-hand);font-size:21px;line-height:1.15;margin:0;color:var(--pencil);transform:rotate(-2deg);text-align:left}
.cb .tape{position:absolute;width:64px;height:20px;background:rgba(167,167,167,.42);top:-9px;left:50%;margin-left:-32px;transform:rotate(4deg);z-index:2;
  clip-path:polygon(3% 0,97% 4%,100% 50%,96% 100%,2% 96%,0 50%)}

/* bookplate */
.cb .plate{margin:auto 0;border:2px solid var(--crow);padding:18px 16px;text-align:center;position:relative;display:flex;flex-direction:column;gap:12px}
.cb .plate::before{content:"";position:absolute;inset:4px;border:1px solid var(--crow);pointer-events:none}
.cb .plate::after{content:"";position:absolute;left:4px;right:4px;top:4px;height:4px;background:var(--stripe)}
.cb .plate .exl{font-family:var(--f-body);font-weight:700;font-size:30px;margin:0;line-height:1}
.cb .stamp{position:absolute;right:-6px;bottom:-26px;font-family:var(--f-body);font-weight:700;color:var(--crow);border:3px solid var(--crow);border-radius:4px;
  padding:4px 10px;font-size:15px;transform:rotate(-12deg) scale(2.4);opacity:0;pointer-events:none;
  mix-blend-mode:multiply;background:repeating-linear-gradient(90deg,transparent 0 3px,rgba(253,253,255,.35) 3px 4px);max-width:240px}
.cb .stamp.on{animation:cb-stamp .35s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes cb-stamp{to{opacity:.85;transform:rotate(-12deg) scale(1)}}
.cb .thump{animation:cb-thump .3s .12s}
@keyframes cb-thump{30%{transform:translateY(2px)}}

/* shake page */
.cb .word{display:inline-block;white-space:nowrap}
.cb .ch{display:inline-block}
.cb .wobble{animation:cb-wob .5s}
@keyframes cb-wob{25%{transform:rotate(-1.2deg)}50%{transform:rotate(1deg)}75%{transform:rotate(-.6deg)}}

/* things I love */
.cb .loves{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.cb .love{border:none;background:none;padding:4px 0;display:flex;flex-direction:column;align-items:center;gap:4px;border-radius:4px}
.cb .love svg{width:52px;height:52px;overflow:visible}
.cb .love .sk{fill:none;stroke:var(--crow);stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.cb .love span{font-family:var(--f-body);font-size:11px;color:var(--pencil)}
.cb .love.found span{color:var(--crow)}
.cb .love:hover svg{transform:rotate(-4deg)}
.cb .love.pop svg{animation:cb-pop .45s}
@keyframes cb-pop{40%{transform:scale(1.18) rotate(4deg)}}
.cb .lovecap{min-height:64px;border-top:1.5px dashed var(--catbird);padding-top:10px}
.cb .stripebar{height:6px;background:var(--stripe);transform:scaleX(0);transform-origin:left;transition:transform .8s cubic-bezier(.4,1.2,.5,1)}
.cb .stripebar.on{transform:scaleX(1)}

/* signature */
.cb .sig{width:100%;height:96px;overflow:visible;cursor:pointer}
.cb .sig text{font-family:var(--f-hand);font-weight:700;font-size:64px;letter-spacing:.02em;fill:var(--crow);stroke:var(--crow);stroke-width:1;stroke-dasharray:1400;stroke-dashoffset:0}
.cb .sig .flourish{fill:none;stroke:var(--crow);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:280;stroke-dashoffset:0}
.cb .sig.go text{animation:cb-sign 2.4s ease forwards}
.cb .sig.go .flourish{animation:cb-flo .6s ease 2s both}
@keyframes cb-sign{0%{stroke-dashoffset:1400;fill:transparent}70%{stroke-dashoffset:0;fill:transparent}100%{stroke-dashoffset:0;fill:var(--crow)}}
@keyframes cb-flo{from{stroke-dashoffset:280}to{stroke-dashoffset:0}}

.cb .specimen{display:flex;gap:12px;align-items:center}
.cb .specimen canvas{width:150px;height:150px;flex:none;cursor:default}
.cb .specimen .meta{min-width:0;display:flex;flex-direction:column;gap:6px}
.cb .tag{font-family:var(--f-body);font-weight:700;font-size:13px;margin:0;overflow-wrap:anywhere}

/* nav */
.cb .nav{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center}
.cb .nbtn{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:-.04em;color:var(--crow);background:transparent;border:1.5px dashed var(--catbird);padding:9px 14px;border-radius:2px}
.cb .nbtn:hover:not(:disabled){border-color:var(--crow);border-style:solid}
.cb .nbtn:disabled{opacity:.35;cursor:default}
.cb .where{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:-.04em;color:var(--pencil);min-width:150px;text-align:center}
.cb .snd{font-family:var(--f-ui);font-weight:600;font-size:12px;letter-spacing:-.04em;color:var(--pencil);background:none;border:none}
.cb .snd:hover{color:var(--crow)}

@media (prefers-reduced-motion: reduce){
  .cb .leaf,.cb .book,.cb .pola{transition-duration:.01s}
  .cb .cover-cta,.cb .tw .caret{animation:none}
}