/* ============ Brittani Fagel — the diary: velvet cover, flip-through pages, fuzzy pen ============ */

.post article.has-diary { max-width: 1240px; }
.post-letter.diary-stowed { position: fixed; top: 300vh; left: 0; width: 1px; height: 1px; overflow: hidden; visibility: hidden; pointer-events: none; }

.diary { position: relative; margin: 0 0 18px; outline: none; }
.diary-desk {
  position: relative;
  margin-inline: calc(var(--bleed, 0px) * -1);
  border-radius: 26px;
  background-color: #EFDCD3;
  background-image:
    radial-gradient(ellipse 60% 55% at 50% 42%, rgba(255, 251, 243, .85), rgba(255, 251, 243, 0) 70%),
    linear-gradient(180deg, rgba(255, 255, 255, .25), rgba(94, 22, 36, .07)),
    var(--grain);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -40px 60px -40px rgba(94, 22, 36, .18), 0 26px 44px -30px rgba(59, 37, 27, .45);
}
.diary-desk::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(176, 141, 87, .28); border-radius: 18px; pointer-events: none; }
.diary-clip { position: relative; overflow: clip; border-radius: inherit; padding: 38px 0 66px; }
.diary--single .diary-desk { border-radius: 0; }
.diary--single .diary-desk::before { inset: 6px 6px; border-radius: 12px; }
.diary--single .diary-clip { padding: 50px 0 50px; }

/* ---------- the book ---------- */
.diary-scene { position: relative; width: var(--W); height: var(--H); margin: 0 auto; perspective: 2600px; perspective-origin: 50% 40%; touch-action: pan-y; -webkit-tap-highlight-color: transparent; }
.diary--single .diary-scene { perspective: 1600px; perspective-origin: 20% 45%; }
.diary--spread.is-closed .diary-scene { transform: translateX(calc(var(--W) / -4)); }
.diary--spread.is-open .dpage.is-left .dpage-face { cursor: default; }
.diary.is-dragging .diary-scene { user-select: none; -webkit-user-select: none; cursor: grabbing; }

.diary-velvet, .diary-board, .cover-front, .cover-inside, .diary-spine {
  background-color: #4A0F1B;
  background-image:
    linear-gradient(125deg, rgba(255, 220, 230, .08), rgba(74, 15, 27, 0) 38%, rgba(20, 2, 6, .38)),
    linear-gradient(rgba(74, 15, 27, .5), rgba(74, 15, 27, .5)),
    url("/assets/velvet.jpg");
  background-size: 100% 100%, 100% 100%, 1100px auto;
  background-position: 0 0, 0 0, 42% 36%;
}
.diary-board { position: absolute; top: 0; left: calc(var(--W) / 2); width: calc(var(--W) / 2); height: var(--H); border-radius: 3px 12px 12px 3px; box-shadow: 0 2px 2px rgba(40, 8, 14, .4), 0 30px 40px -18px rgba(59, 20, 27, .55), inset -2px 0 0 rgba(255, 220, 200, .08); }
.diary--single .diary-board { left: 0; width: var(--W); border-radius: 6px 12px 12px 6px; }
.diary--spread.is-open .diary-board { left: 0; width: var(--W); border-radius: 12px; }
.diary-spine { position: absolute; top: -5px; bottom: -5px; left: calc(var(--W) / 2 - 13px); width: 26px; border-radius: 5px; box-shadow: inset 6px 0 8px -4px rgba(0, 0, 0, .45), inset -6px 0 8px -4px rgba(0, 0, 0, .45); opacity: 0; transition: opacity .3s .9s; }
.diary--spread.is-open .diary-spine { opacity: 1; }
.diary--single .diary-spine { display: none; }
.diary--single .diary-board::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 6px; width: 0; border-left: 1.5px dashed rgba(228, 208, 160, .55); }

.diary-edges { position: absolute; z-index: 1; top: calc(var(--E) + 3px); height: calc(var(--ph) - 6px); width: calc(var(--E) - 3px); background: repeating-linear-gradient(90deg, #FFFBF3 0 1px, #E3D2B8 1px 2px); transform-origin: 0 50%; transform: scaleX(calc(.25 + .75 * (1 - var(--prog, 0)))); transition: transform .6s var(--ease); }
.diary-edges--right { left: calc(var(--E) + 2 * var(--pw)); border-radius: 0 3px 3px 0; }
.diary-edges--left { left: 3px; transform-origin: 100% 50%; transform: scaleX(calc(.25 + .75 * var(--prog, 0))); border-radius: 3px 0 0 3px; }
.diary--single .diary-edges--right { left: calc(var(--S) + var(--pw)); transform: none; }
.diary--single .diary-edges--left, .diary.is-closed .diary-edges { display: none; }

.diary-crease { position: absolute; z-index: 3; top: var(--E); height: var(--ph); left: calc(var(--W) / 2 - 1px); width: 2px; background: linear-gradient(rgba(59, 37, 27, .05), rgba(59, 37, 27, .22) 50%, rgba(59, 37, 27, .05)); pointer-events: none; }
.diary--single .diary-crease, .diary.is-closed .diary-crease { display: none; }

.diary-ribbon { position: absolute; z-index: 1; top: calc(var(--H) - var(--E) - 30px); left: calc(var(--W) / 2 + 46px); width: 17px; height: 104px; background: linear-gradient(90deg, #3A0B15, #8A2338 35%, #B23A55 48%, #6E1A2C 62%, #3A0B15); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 88%, 0 100%); transform-origin: 50% 0; animation: ribbon-sway 6s ease-in-out infinite; pointer-events: none; }
.diary--single .diary-ribbon { left: calc(var(--S) + var(--pw) * .72); height: 84px; }
.diary.is-closed .diary-ribbon { top: calc(var(--H) - 30px); }
@keyframes ribbon-sway { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }

/* ---------- pages ---------- */
.dpage { position: absolute; z-index: 2; top: var(--E); left: calc(var(--E) + var(--pw)); width: var(--pw); height: var(--ph); visibility: hidden; }
.diary--single .dpage { left: var(--S); transform-style: preserve-3d; }
.diary--spread .dpage { backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.dpage.is-left { left: var(--E); visibility: visible; transform-origin: 100% 50%; }
.dpage.is-right { visibility: visible; transform-origin: 0 50%; }
.dpage.is-single { visibility: visible; transform-origin: 0 50%; }
.dpage.is-turning { z-index: 6; }
.dpage--probe { visibility: hidden !important; z-index: -1; pointer-events: none; }

.dpage-face {
  --rule: 44px;
  position: absolute; inset: 0; overflow: hidden;
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: var(--ivory);
  background-image:
    linear-gradient(90deg, transparent var(--rule), rgba(224, 125, 152, .45) var(--rule) calc(var(--rule) + 1.5px), transparent calc(var(--rule) + 1.5px)),
    repeating-linear-gradient(transparent 0 29px, rgba(90, 59, 42, .11) 29px 30px),
    var(--grain);
  background-position: 0 0, 0 14px, 0 0;
  border-radius: 0 5px 5px 0;
}
.dpage-face::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(90, 59, 42, .2), rgba(90, 59, 42, .06) 22px, transparent 48px); }
.is-left .dpage-face { --rule: 40px; border-radius: 5px 0 0 5px; }
.is-left .dpage-face::after { background: linear-gradient(270deg, rgba(90, 59, 42, .2), rgba(90, 59, 42, .06) 22px, transparent 48px); }
.is-right .dpage-face { --rule: 50px; }
.diary--single .dpage-face { --rule: 32px; }
.dpage-back { display: none; }
.diary--single .dpage-back {
  display: block; position: absolute; inset: 0; transform: rotateY(180deg);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background-color: #FBF4E8;
  background-image: repeating-linear-gradient(transparent 0 29px, rgba(90, 59, 42, .08) 29px 30px), linear-gradient(270deg, rgba(90, 59, 42, .22), transparent 40px), var(--grain);
  background-position: 0 14px, 0 0, 0 0;
  border-radius: 5px 0 0 5px;
}
.dpage-shade { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(90deg, rgba(40, 14, 20, .55), rgba(40, 14, 20, .16) 45%, rgba(40, 14, 20, .04)); }
.is-left .dpage-shade { background: linear-gradient(270deg, rgba(40, 14, 20, .55), rgba(40, 14, 20, .16) 45%, rgba(40, 14, 20, .04)); }
.dpage-curl { position: absolute; inset: 0; opacity: 0; pointer-events: none; background: linear-gradient(90deg, transparent 32%, rgba(255, 255, 255, .6) 47%, rgba(59, 37, 27, .16) 55%, transparent 70%); }

.dpage-scroll { position: absolute; inset: 0; overflow-x: hidden; overflow-y: auto; padding: 46px 40px 54px 62px; scrollbar-width: thin; scrollbar-color: rgba(158, 74, 94, .35) transparent; }
.is-left .dpage-scroll { padding-left: 58px; padding-right: 44px; }
.is-right .dpage-scroll { padding-left: 70px; padding-right: 38px; }
.diary--single .dpage-scroll { padding: 40px 20px 50px 46px; }
.dpage-scroll::-webkit-scrollbar { width: 6px; }
.dpage-scroll::-webkit-scrollbar-thumb { background: rgba(158, 74, 94, .3); border-radius: 6px; }
.dpage--tall .dpage-scroll { box-shadow: inset 0 -18px 16px -16px rgba(94, 22, 36, .2); }
.dpage-running, .dpage-num { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; color: var(--rose-ink); }
.dpage-running { top: 16px; font-size: 10px; font-weight: 500; letter-spacing: .24em; text-transform: uppercase; opacity: .7; }
.dpage-num { bottom: 16px; font-family: var(--f-display); font-style: italic; font-size: 16px; }

/* the entry inside the pages */
.dpage .dpage-body.post-body { display: flow-root; font-size: 16.5px; line-height: 1.78; }
.diary--single .dpage .dpage-body.post-body { font-size: 16px; line-height: 1.75; }
.dpage .dpage-body > :first-child { margin-top: 0; }
.dpage .dpage-body > :last-child { margin-bottom: 0; }
.dpage .dpage-body p { margin-bottom: 1em; }
.dpage .dpage-body h2 { margin-top: 1.1em; font-size: 30px; }
.dpage .dpage-body h3 { margin-top: 1em; font-size: 24px; }
.dpage .dpage-body blockquote:not(.jb) { font-size: 23px; margin-top: 1.1em; margin-bottom: 1.1em; }
.dpage .dpage-body .jb { margin: 1.5em auto; }
.dpage .dpage-body .jb-envelope { margin-top: 2.2em; }
.dpage .dpage-body .jb-envelope.open { margin-top: 7.5em; }
.dpage .dpage-body .jb-tape { font-size: 23px !important; }
.dpage .dpage-body .post-figure { margin-top: 1.2em; margin-bottom: 1.2em; }
.dpage .dpage-body img { max-height: calc(var(--ph) - 170px); object-fit: contain; }
.dpage .dpage-body > p:first-child::first-letter { float: none; padding: 0; font: inherit; color: inherit; line-height: inherit; }
.dpage .dpage-body > p.diary-dropcap::first-letter { float: left; padding: .08em .1em 0 0; font-family: var(--f-display); font-size: 3.9em; line-height: .78; color: var(--burgundy); }

.dpage .post-head { margin: 0 0 16px; padding: 0; gap: 8px; background: none; box-shadow: none; }
.dpage .post-head .eyebrow { font-size: 10.5px; }
.dpage .diary-date { font-size: 19px; }
.dpage .post-title { font-size: clamp(30px, 3.1vw, 40px); line-height: 1.02; }
.diary--single .dpage .post-title { font-size: 31px; }
.dpage .post-dek { font-size: 18px; line-height: 1.35; }
.dpage .post-stickers { margin-top: 2px; }
.dpage .post-cover.jb-polaroid { width: min(290px, 84%); margin: 8px auto 22px; padding: 9px 9px 12px; transform: rotate(-1.5deg); }
.dpage .post-cover img { width: 100%; max-height: var(--diary-cover-max, min(250px, calc(var(--ph) * .36))); object-fit: cover; }
.diary-end { margin-top: .8em; text-align: right; }
.dpage .diary-end .sign { margin: 0; font-size: 34px; }
.diary-theend { display: inline-block; padding: 12px 0 6px; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 19px; color: var(--rose-ink) !important; text-decoration: none !important; border-bottom: 1px dashed rgba(158, 74, 94, .5); line-height: 1.2; }
.diary-theend:hover { color: var(--burgundy) !important; }
.dpage--end .dpage-body { position: absolute; inset: 0; display: grid !important; place-content: center; justify-items: center; }
.dpage--end .diary-end { position: relative; display: grid; justify-items: center; gap: 6px; margin: 0; padding-top: 120px; text-align: center; }
.dpage--end .diary-end::before { content: ""; position: absolute; top: 0; left: 50%; width: 120px; height: 100px; margin-left: -60px; background: url("/assets/kiss.webp") center / contain no-repeat; mix-blend-mode: multiply; transform: rotate(-10deg); opacity: .9; }
.dpage--end .diary-end .sign { font-size: 44px; text-align: center; }
.diary-blank-note { position: absolute; left: 0; right: 0; top: 40%; margin: 0 !important; text-align: center; font-family: var(--f-display); font-style: italic; font-size: 20px; line-height: 1.6; color: rgba(158, 74, 94, .75); transform: rotate(-4deg); }
.diary-blank-note span { font-size: 26px; color: var(--burgundy); }

/* page corners you can click */
.diary-corner { position: absolute; z-index: 7; bottom: var(--E); width: 66px; height: 66px; padding: 0; border: 0; background: none; cursor: pointer; overflow: hidden; }
.diary-corner--next { left: calc(var(--E) + 2 * var(--pw) - 66px); }
.diary-corner--prev { left: var(--E); }
.diary--single .diary-corner { width: 52px; height: 52px; }
.diary--single .diary-corner--next { left: calc(var(--S) + var(--pw) - 52px); }
.diary--single .diary-corner--prev { left: var(--S); }
.diary-corner::before { content: ""; position: absolute; bottom: 0; width: 38px; height: 38px; transition: transform .35s var(--ease); }
.diary-corner--next::before { right: 0; transform-origin: 100% 100%; transform: scale(.45); background: linear-gradient(315deg, rgba(0, 0, 0, 0) 50%, #F1E3CC 50%, #FFF8EA 70%, #E6D3B5); box-shadow: -3px -3px 6px -2px rgba(59, 37, 27, .25); clip-path: polygon(0 100%, 100% 0, 100% 100%, 0 100%); }
.diary-corner--prev::before { left: 0; transform-origin: 0 100%; transform: scale(.45); background: linear-gradient(45deg, rgba(0, 0, 0, 0) 50%, #F1E3CC 50%, #FFF8EA 70%, #E6D3B5); clip-path: polygon(0 0, 100% 100%, 0 100%); }
.diary-corner--next::before { background: linear-gradient(315deg, var(--cream) 0 50%, #FFF8EA 50%, #E9D8BC 100%); clip-path: polygon(100% 0, 100% 100%, 0 100%); }
.diary-corner--prev::before { background: linear-gradient(45deg, var(--cream) 0 50%, #FFF8EA 50%, #E9D8BC 100%); clip-path: polygon(0 0, 100% 100%, 0 100%); }
@media (hover: hover) { .diary-corner:hover::before { transform: scale(1); } }
.diary.is-closed .diary-corner, .diary.is-turning .diary-corner, .diary.at-start .diary-corner--prev, .diary.at-end .diary-corner--next { visibility: hidden; }

/* ---------- the velvet cover ---------- */
.diary-cover { position: absolute; z-index: 8; top: 0; left: calc(var(--W) / 2); width: calc(var(--W) / 2); height: var(--H); transform-origin: 0 50%; transform-style: preserve-3d; cursor: pointer; }
.diary--single .diary-cover { left: 0; width: var(--W); }
.diary.is-open .diary-cover { transform: rotateY(-180deg); z-index: 1; cursor: default; }
.diary.is-opening .diary-cover { z-index: 5; }
.diary--single.is-open .diary-cover { visibility: hidden; }
.cover-front, .cover-inside { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 3px 12px 12px 3px; }
.cover-inside { transform: rotateY(180deg); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .2); }
.cover-front {
  container-type: size;
  box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .07), inset -3px 0 4px rgba(0, 0, 0, .35), inset 0 -3px 5px rgba(0, 0, 0, .3), inset 0 2px 2px rgba(255, 225, 230, .12),
    3px 3px 0 -1px #F4E8D2, 5px 5px 0 -1px #E2D0B3, 7px 7px 0 -1px #F4E8D2, 9px 9px 0 0 #3A0B15, 0 34px 46px -22px rgba(59, 20, 27, .6);
}
.diary.is-open .cover-front, .diary.is-opening .cover-front { box-shadow: inset 0 0 0 1px rgba(255, 220, 200, .07), 0 20px 30px -20px rgba(59, 20, 27, .5); }
.cover-spine { position: absolute; left: 0; top: 0; bottom: 0; width: 30px; border-radius: 3px 0 0 3px; background: linear-gradient(90deg, rgba(10, 0, 3, .55), rgba(255, 210, 220, .1) 55%, rgba(10, 0, 3, .45) 80%, rgba(10, 0, 3, .1)); }
.cover-spine::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 1px; background: rgba(228, 208, 160, .35); }
.cover-stitch { position: absolute; inset: 16px 16px 16px 42px; border: 1.5px dashed rgba(228, 208, 160, .5); border-radius: 6px 10px 10px 6px; pointer-events: none; }
.cover-corner { position: absolute; width: clamp(40px, 12cqw, 60px); aspect-ratio: 1; filter: drop-shadow(-1px 2px 1px rgba(0, 0, 0, .35)); }
.cover-corner svg { display: block; width: 100%; height: 100%; }
.cover-corner--tr { top: -2px; right: -2px; }
.cover-corner--br { bottom: -2px; right: -2px; transform: scaleY(-1); }
.cover-corner--tl { top: -2px; left: 22px; transform: scaleX(-1); width: clamp(28px, 8cqw, 40px); }
.cover-corner--bl { bottom: -2px; left: 22px; transform: scale(-1); width: clamp(28px, 8cqw, 40px); }
.cover-bow { position: absolute; top: -3.5cqh; left: 50%; width: clamp(66px, 19cqw, 96px); margin-left: calc(clamp(66px, 19cqw, 96px) / -2 + 12px); transform: rotate(-6deg); filter: drop-shadow(0 8px 6px rgba(20, 2, 6, .45)); pointer-events: none; }
.diary--single .cover-bow { left: 34%; }
.cover-plate { position: absolute; top: 17cqh; left: calc(15cqw + 12px); right: 15cqw; display: grid; justify-items: center; gap: 2px; padding: 5cqh 4cqw 3.4cqh; border: 1px solid rgba(228, 208, 160, .6); outline: 1px solid rgba(228, 208, 160, .3); outline-offset: 5px; border-radius: 50% / 22%; }
.cover-foil {
  font-family: var(--f-display); font-style: italic; font-weight: 400; font-size: clamp(38px, 13.5cqw, 64px); line-height: 1; letter-spacing: .01em; white-space: nowrap;
  background: linear-gradient(100deg, #A8803F 0%, #F4E6BE 24%, #C9A45E 42%, #FFF3CF 56%, #B08D57 74%, #E7D3A3 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 1.5px 0 rgba(20, 2, 6, .55));
}
.cover-flourish { display: block; width: 72%; }
.cover-flourish svg { display: block; width: 100%; height: auto; }
.cover-label {
  position: absolute; top: 60cqh; left: calc(17cqw + 12px); right: 17cqw; display: grid; gap: 6px; padding: 14px 16px 15px; text-align: center;
  background-color: #FBF3E4; background-image: var(--grain);
  box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .7), inset 0 0 0 4px #FBF3E4, inset 0 0 0 5px rgba(176, 141, 87, .45), 0 6px 10px -4px rgba(10, 0, 3, .5);
  clip-path: polygon(8px 0, calc(100% - 8px) 0, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0 calc(100% - 8px), 0 8px);
}
.cover-label-kicker { font-size: 9.5px; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--rose-ink); }
.cover-label-title { font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: clamp(17px, 5cqw, 22px); line-height: 1.12; color: var(--burgundy); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; }
.cover-strap { position: absolute; top: 50%; right: -12px; width: clamp(70px, 20cqw, 96px); height: 34px; margin-top: -17px; border-radius: 17px 0 0 17px; background: linear-gradient(180deg, rgba(255, 210, 220, .12), rgba(0, 0, 0, .25)), #5E1624; box-shadow: 0 3px 5px rgba(10, 0, 3, .45), inset 0 0 0 1px rgba(0, 0, 0, .25); }
.cover-strap::before { content: ""; position: absolute; inset: 5px 0 5px 10px; border: 1px dashed rgba(228, 208, 160, .55); border-right: 0; border-radius: 12px 0 0 12px; }
.cover-lock { position: absolute; left: -30px; top: 50%; width: 52px; margin-top: -40px; filter: drop-shadow(0 4px 3px rgba(10, 0, 3, .5)); transform-origin: 50% 20%; }
.cover-lock svg { display: block; width: 100%; height: auto; overflow: visible; }
.lock-shackle { transition: transform .35s var(--ease); }
.cover-lock.is-unlocking { animation: lock-jiggle .42s ease-in-out; }
.cover-lock.is-unlocking .lock-shackle { transform: translateY(-7px); }
@keyframes lock-jiggle { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-9deg); } 65% { transform: rotate(6deg); } }
@media (hover: hover) { .diary.is-closed .diary-cover:hover .cover-lock { animation: lock-jiggle .6s ease-in-out; } }
.cover-open {
  position: absolute; bottom: 8cqh; left: calc(50% + 6px); transform: translateX(-50%); min-height: 46px; padding: 0 24px; white-space: nowrap;
  border: 1px solid rgba(228, 208, 160, .75); border-radius: 999px; background: rgba(20, 2, 6, .28); color: #F4E6BE;
  font: 500 11.5px/1 var(--f-body); letter-spacing: .22em; text-transform: uppercase; cursor: pointer; transition: background .25s, color .25s;
}
.cover-open::after { content: ""; position: absolute; inset: 3px; border-radius: inherit; border: 1px solid rgba(228, 208, 160, .25); pointer-events: none; }
.cover-open:hover { background: #F4E6BE; color: var(--velvet); }
.cover-open:focus-visible { outline: 2px solid #F4E6BE; outline-offset: 4px; }
.diary.is-closed .diary-cover { animation: cover-breathe 5s ease-in-out 1.2s infinite; }
@keyframes cover-breathe { 0%, 88%, 100% { transform: rotateY(0); } 93% { transform: rotateY(-7deg); } }

/* ---------- stickers on the desk ---------- */
.diary-stickers { position: absolute; top: 38px; left: 50%; width: var(--W); height: var(--H); margin-left: calc(var(--W) / -2); z-index: 9; pointer-events: none; }
.diary-stickers .margin-stickers { transition: opacity .6s .9s; }
.diary.is-closed .diary-stickers .margin-stickers { opacity: 0; transition: none; }
.diary.is-closed .diary-stickers .drag-sticker { pointer-events: none; }

/* ---------- the fuzzy pen ---------- */
.diary-pen { position: absolute; z-index: 12; pointer-events: none; transition: transform 1.3s cubic-bezier(.55, .02, .28, 1); }
.pen-drag { pointer-events: none; }
.pen-art { display: block; padding: 0; border: 0; background: none; cursor: grab; touch-action: none; pointer-events: auto; transform-origin: 50% 50%; -webkit-tap-highlight-color: transparent; border-radius: 40px; }
.pen-art:focus-visible { outline: 2px dashed var(--rose-ink); outline-offset: 2px; }
.diary-pen.is-held .pen-art { cursor: grabbing; }
.pen-svg { display: block; width: 100%; height: auto; overflow: visible; }
.pen-fluff g { transform-box: fill-box; transform-origin: 20% 50%; }
.diary-pen.is-held .pen-shadow { transform: translate(8px, 14px); opacity: .6; }
.diary-pen { width: 0; height: 0; }
.pen--side .diary-pen { top: calc(38px + var(--H) * .6); left: calc(50% + var(--W) / 2 + 44px); }
.pen--side .pen-art { width: 180px; margin: -24px 0 0 -90px; rotate: -68deg; scale: 1.42; }
.pen--side.is-closed:not(.is-opening) .diary-pen { transform: translateX(calc(var(--W) / -4)); }
.pen--tuck .diary-pen { top: 28px; left: calc(50% + var(--W) / 2 - 90px); }
.pen--tuck .pen-art { width: 150px; margin: -20px 0 0 -75px; rotate: -10deg; scale: 1.24; }
.diary--spread.pen--tuck.is-closed:not(.is-opening) .diary-pen { transform: translateX(calc(var(--W) / -4)); }
@media (hover: hover) {
  .pen-art:hover .fluff-a { animation: fluff-a .8s ease-in-out infinite; }
  .pen-art:hover .fluff-b { animation: fluff-b .95s ease-in-out infinite; }
  .pen-art:hover .fluff-c { animation: fluff-a 1.1s ease-in-out infinite reverse; }
}
.pen-art.scribble .fluff-a { animation: fluff-a .5s ease-in-out 2; }
.pen-art.scribble .fluff-b { animation: fluff-b .5s ease-in-out 2; }
.pen-art.scribble { animation: scribble .9s ease-in-out; }
@keyframes fluff-a { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(7deg) scale(1.05); } }
@keyframes fluff-b { 0%, 100% { transform: rotate(0) scale(1); } 50% { transform: rotate(-8deg) scale(.97); } }
@keyframes scribble { 0%, 100% { transform: none; } 15% { transform: translate(-6px, 4px) rotate(4deg); } 30% { transform: translate(5px, -2px) rotate(-3deg); } 45% { transform: translate(-5px, 5px) rotate(3deg); } 60% { transform: translate(6px, -1px) rotate(-2deg); } 78% { transform: translate(-2px, 2px) rotate(1deg); } }

/* the doodle it leaves */
.diary-doodle { position: absolute; z-index: 5; width: 50px; height: auto; pointer-events: none; overflow: visible; transition: opacity 1.1s; }
.diary-doodle path { fill: none; stroke: #D4507A; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: doodle-draw .6s ease-out forwards; }
.diary-doodle--xo { width: 62px; }
.diary-doodle.at-tr { top: 6px; right: 10px; transform: rotate(8deg); }
.diary-doodle.at-br { bottom: 30px; right: 18px; transform: rotate(-10deg); }
.cover-front .diary-doodle { top: 7cqh; right: 12cqw; width: 70px; }
.cover-front .diary-doodle path { stroke: #F4E6BE; }
.diary-doodle.fade { opacity: 0; }
@keyframes doodle-draw { to { stroke-dashoffset: 0; } }

/* ---------- controls ---------- */
.diary-nav { position: relative; display: flex; align-items: center; justify-content: center; gap: clamp(12px, 3vw, 26px); margin: -12px auto 0; }
.diary-tab {
  display: grid; place-items: center; width: 58px; height: 48px; padding: 0; border: 0; cursor: pointer; color: var(--velvet);
  background: linear-gradient(135deg, #F4E6BE 0%, #C9A45E 38%, #FFF3CF 55%, #B08D57 78%, #E4D0A0 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 248, 226, .6), inset 0 -2px 0 rgba(110, 81, 40, .35), 0 8px 14px -8px rgba(59, 37, 27, .6);
  transition: transform .25s var(--ease), filter .25s;
}
.diary-tab--prev { border-radius: 22px 6px 6px 22px; }
.diary-tab--next { border-radius: 6px 22px 22px 6px; }
.diary-tab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.diary-tab:hover { transform: translateY(-2px); }
.diary-tab--prev:hover svg { transform: translateX(-2px); }
.diary-tab--next:hover svg { transform: translateX(2px); }
.diary-tab svg { transition: transform .25s var(--ease); }
.diary-tab[aria-disabled="true"] { opacity: .38; cursor: default; transform: none; filter: saturate(.4); }
.diary-where { display: grid; justify-items: center; gap: 9px; min-width: 150px; }
.diary-tag {
  position: relative; padding: 5px 16px 6px 26px; font-family: var(--f-display); font-style: italic; font-weight: 500; font-size: 20px; line-height: 1.1; color: var(--burgundy); white-space: nowrap;
  background-color: var(--ivory); background-image: var(--grain);
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 12px 100%, 0 50%);
  transform: rotate(-2deg);
  filter: drop-shadow(0 3px 3px rgba(59, 37, 27, .25));
}
.diary-tag::before { content: ""; position: absolute; left: 12px; top: 50%; width: 6px; height: 6px; margin-top: -3px; border-radius: 50%; background: #EFDCD3; box-shadow: inset 0 0 0 1px rgba(176, 141, 87, .6); }
.diary-dots { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; max-width: 240px; }
.diary-dot { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--gold); transition: transform .3s var(--ease), background .3s; }
.diary-dot.is-on { background: var(--burgundy); box-shadow: none; transform: scale(1.35); }
.diary-foot { position: relative; margin: 2px 0 0; padding-bottom: 12px; text-align: center; }
.diary-mode, .diary-return-btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 12px; border: 0; background: none; cursor: pointer; font: 500 11.5px/1 var(--f-body); letter-spacing: .16em; text-transform: uppercase; color: var(--rose-ink); }
.diary-mode { text-decoration: underline; text-decoration-color: rgba(158, 74, 94, .4); text-underline-offset: 5px; }
.diary-mode:hover { color: var(--burgundy); }
.diary-mode svg, .diary-return-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.diary-return { margin: 0 0 18px; text-align: center; }
.diary-return-btn { padding: 0 22px; border-radius: 999px; background: var(--velvet); color: #F4E6BE; box-shadow: inset 0 0 0 1px rgba(228, 208, 160, .5), 0 10px 18px -12px rgba(59, 10, 20, .7); }
.diary-return-btn:hover { background: var(--burgundy); }
.diary-return-btn svg { width: 20px; height: 20px; }

/* ---------- phones ---------- */
@media (max-width: 899px) {
  .diary-nav { margin-top: -8px; }
  .diary-tag { font-size: 18px; }
  .diary-where { min-width: 0; }
}

/* ---------- reduced motion: no swinging, no wiggling ---------- */
@media (prefers-reduced-motion: reduce) {
  .diary-ribbon, .diary.is-closed .diary-cover, .pen-art.scribble, .pen-art.scribble g, .cover-lock.is-unlocking { animation: none !important; }
  .diary-pen, .diary-edges, .diary-spine { transition: none; }
  .diary-doodle path { animation: none; stroke-dashoffset: 0; }
  @media (hover: hover) { .pen-art:hover g { animation: none !important; } }
}