.diary-room { padding-bottom:20px; }
.diary-layout { max-width:1250px; padding-top:35px; }
.diary-heading { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:30px; }
.diary-heading h1 { margin:10px 0 0; font-size:clamp(30px,4vw,48px); letter-spacing:-1.5px; }
.diary-heading>p { color:#6c625c; font-style:italic; font-size:14px; }
.book-tabs { display:flex; justify-content:center; gap:8px; flex-wrap:wrap; position:relative; z-index:4; }
.book-tabs button { background:#d7cdbc; border:0; border-radius:8px 8px 0 0; padding:14px 23px; color:#5a4d44; font:inherit; font-size:13px; cursor:pointer; }
.book-tabs button.active { background:#823c39; color:#fff4df; }
.book-scene { perspective:2600px; perspective-origin:50% 50%; padding:25px 95px 35px 40px; }
.diary-book { position:relative; transform-style:preserve-3d; max-width:1150px; margin:auto; border-radius:32px; outline-offset:15px; touch-action:pan-y; }
.diary-book img { user-select:none; -webkit-user-drag:none; }
.book-cover { position:absolute; inset:-4.5% -3.5% -4.5%; background:url('/assets/book/open-diary-cutout.webp') center/100% 100% no-repeat; border:0; filter:drop-shadow(0 12px 10px #130d0838); transform:translateZ(-2px); }
.book-paper-block { display:none; }
.book-spread { display:grid; grid-template-columns:1fr 1fr; position:relative; border-radius:6px; }
.book-page { background-color:#f2ead8; background-image:url('/assets/book/open-diary.webp'); background-size:214% 110%; color:#172735; min-width:0; margin:0; width:100%; max-width:none; position:relative; min-height:700px; padding:38px 34px 42px; }
.book-left { border-radius:30px 3px 3px 30px; background-position:6.5% 48%; box-shadow:inset -18px 0 25px -20px #45342180; }
.book-right { border-radius:3px 30px 30px 3px; background-position:94% 48%; box-shadow:inset 18px 0 25px -20px #45342180; }
.book-spine { width:20px; position:absolute; top:0; bottom:0; left:calc(50% - 10px); background:linear-gradient(90deg,transparent,#634c351b 42%,#6b513b33 50%,#fff7e222 56%,transparent); pointer-events:none; }
.book-ribbon { display:none; }
.book-bookmarks { position:absolute; right:-63px; top:13%; z-index:18; display:grid; gap:14px; transform:translateZ(25px); }
.book-bookmark { position:relative; display:grid; justify-items:center; align-content:center; gap:1px; width:77px; height:64px; padding:5px 6px 5px 14px; border:0; color:#604b34; background:#d9c395; background-image:radial-gradient(ellipse at 25% 30%,#fff7df70,transparent 65%),repeating-linear-gradient(18deg,transparent 0 3px,#654a2d08 3px 4px); clip-path:polygon(0 2%,96% 0,86% 50%,98% 98%,0 95%,8% 50%); font:700 17px/1 Caveat,cursive; cursor:pointer; filter:drop-shadow(2px 3px 2px #36251455); transform:rotate(-2deg); transition:transform .15s,color .15s; }
.book-bookmark:before { content:""; position:absolute; inset:4px 10px 5px 8px; border:1px solid #7a603b; border-radius:1px; pointer-events:none; }
.book-bookmark svg { width:27px; height:27px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; }
.bookmark-collection { transform:rotate(2deg); color:#6c493e; background-color:#d8b7a0; }
.bookmark-stories { color:#415f5b; background-color:#bed0bd; }
.book-bookmark.active,.book-bookmark:hover { transform:translateX(7px) rotate(0deg); color:#2d2923; }
.book-bookmark:focus-visible { outline:none; background-color:#faeac0; }
.book-bookmark:focus-visible:before { border:2px solid #263b42; }
.book-print-page,.book-page-image { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.book-print-page>img { position:absolute; top:0; width:200%; height:100%; max-width:none; object-fit:fill; }
.book-print-left>img { left:0; }
.book-print-right>img { left:-100%; }
.book-page-image>img { width:100%; height:100%; object-fit:fill; display:block; }
.book-eyebrow:empty { display:none; }
.book-page-inner h2 { font-family:Caveat,cursive; font-size:clamp(36px,4vw,55px); font-weight:700; line-height:1; letter-spacing:-.8px; color:#152734; margin:14px 0 24px; }
.book-eyebrow { color:#917e68; letter-spacing:1.6px; font-size:9px; font-weight:700; text-transform:uppercase; }
.book-page p { font-size:14px; line-height:1.8; margin:0 0 16px; }
.book-page .book-lede { font-size:16px; color:#6b5144; }
.book-page .book-pencil { font-size:11px; color:#8a7967; line-height:1.6; }
.book-page-number { position:absolute; bottom:17px; font-family:Georgia,serif; font-size:12px; color:#9a8972; }
.book-left .book-page-number { left:28px; }
.book-right .book-page-number { right:28px; }
.book-address { font-size:14px; line-height:1.8; }
.book-address span { color:#917d65; font-size:11px; }
.book-doodle { display:flex; justify-content:center; align-items:center; gap:24px; margin:26px 0; color:#934f42; font:30px Georgia,serif; }
.book-doodle span { border:2px solid #934f42; padding:13px 21px; border-radius:48% 48% 10% 10%; transform:rotate(-7deg); font-size:48px; }
.book-title-page h2 { font:700 63px/1 Caveat,cursive; margin-bottom:25px; }
.book-page .book-handwritten { font:italic 22px/1.5 Georgia,serif; color:#7b4740; }
.book-contents { margin:25px 0; }
.book-contents button { display:flex; align-items:center; gap:15px; width:100%; background:none; padding:19px 0; border:0; border-bottom:1px solid #c9b99d; text-align:left; font:inherit; color:#514138; cursor:pointer; }
.book-contents button span { color:#ad705a; font:italic 18px Georgia,serif; }
.book-contents button span:last-child { margin-left:auto; }
.book-contents strong { font-size:15px; }
.book-note { padding:20px; margin:24px 0; border:1px solid #c6b593; background:#efe3c6a6; transform:rotate(-1deg); position:relative; }
.book-note:before { content:""; position:absolute; top:-8px; left:40%; width:65px; height:17px; background:#c5ae7880; transform:rotate(3deg); }
.book-note strong { color:#704c3e; font-size:13px; }
.book-note p { font-size:12px; margin:12px 0 0; }
.book-note ol { padding-left:18px; font-size:13px; line-height:2; }
.book-text-button { display:inline-block; font:inherit; font-size:12px; color:#813e36; border:0; border-bottom:1px solid #aa7861; background:none; padding:5px 0; cursor:pointer; text-decoration:none; }
.book-controls { display:flex; align-items:center; justify-content:center; gap:25px; position:relative; z-index:3; margin-top:22px; }
.book-controls>span { text-align:center; min-width:190px; max-width:70%; color:#57463c; }
.book-controls strong { display:block; font-size:13px; }
.book-controls small { display:block; margin-top:7px; font-size:11px; color:#8a7969; }
.book-arrow { width:46px; height:46px; border:1px solid #aa9680; border-radius:50%; background:#f6eddc; color:#75443a; cursor:pointer; font-size:23px; }
.book-arrow:disabled { opacity:.35; cursor:default; }
.book-help { text-align:center; color:#887b6c; font-size:11px; margin:24px 0 0; }
.book-card-pair { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:20px; }
.album-slot { min-width:0; text-align:center; }
.album-pocket { position:relative; aspect-ratio:2/3; padding:7px; border:1px solid #c4b596; border-radius:6px; background:linear-gradient(135deg,#e6dbc155,#fff9eb55); box-shadow:inset 0 2px 5px #80634213; }
.album-pocket>img { width:100%; height:100%; object-fit:contain; border-radius:5px; display:block; box-shadow:2px 3px 6px #46312025; transform:rotate(-2deg); }
.album-slot:nth-child(even) .album-pocket>img { transform:rotate(2deg); }
.album-corner { position:absolute; width:23px; height:23px; z-index:2; background:linear-gradient(135deg,#dac8a4,#f1e3c5); filter:drop-shadow(1px 2px 1px #66503a30); }
.corner-tl { top:-2px; left:-2px; clip-path:polygon(0 0,100% 0,0 100%); }
.corner-tr { top:-2px; right:-2px; clip-path:polygon(0 0,100% 0,100% 100%); }
.corner-bl { bottom:-2px; left:-2px; clip-path:polygon(0 0,100% 100%,0 100%); }
.corner-br { bottom:-2px; right:-2px; clip-path:polygon(100% 0,100% 100%,0 100%); }
.album-empty .album-pocket { border-style:dashed; }
.album-empty .album-pocket>img { filter:grayscale(1); opacity:.075; box-shadow:none; transform:none; }
.album-placeholder { position:absolute; top:43%; left:7px; right:7px; font:italic 15px/1.5 Georgia,serif; color:#aa997d; }
.album-stamp { position:absolute; bottom:9px; right:5px; transform:rotate(-9deg); padding:4px 6px; border:1px solid #627b55; color:#466441; background:#f5ecdce6; font-size:8px; letter-spacing:.6px; }
.album-label { margin-top:17px; }
.album-label small { font-size:8px; letter-spacing:.6px; color:#8c7c66; }
.album-label h3 { font:700 24px/1.1 Caveat,cursive; margin:8px 0; color:#233442; }
.album-label p { font-size:10px; line-height:1.6; color:#8c7a65; }
.book-card-pair .achievement-card { background:none; border:0; padding:0; box-shadow:none; transform:rotate(-3deg); display:flex; flex-direction:column; }
.book-card-pair .achievement-card:nth-child(2) { transform:rotate(3deg); margin-top:23px; }
.book-card-pair .achievement-icon { width:100%; height:auto; display:block; margin:0 0 12px; }
.achievement-icon img { display:block; width:100%; height:100%; object-fit:contain; border-radius:8px; }
.book-card-pair .achievement-icon img { aspect-ratio:2/3; width:100%; height:auto; filter:drop-shadow(0 5px 5px #4c34252a); }
.book-card-pair .achievement-card.locked { opacity:1; }
.achievement-card.locked .achievement-icon img { filter:grayscale(1); opacity:.48; }
.book-card-pair .achievement-card h3 { font-size:13px; margin:0 0 8px; }
.book-card-pair .achievement-card p { font-size:10px; line-height:1.6; }
.book-card-pair .badge-status { font-size:8px; letter-spacing:.5px; margin-bottom:8px; order:0; color:#866e57; }
.book-collection-page h2 { font-size:48px; }
.book-empty { text-align:center; padding:45px 0; }
.book-empty>span { font:70px Georgia,serif; color:#a0775e; }
.book-empty h3 { font:italic 27px Georgia,serif; color:#71483e; }
.book-proposal-form { display:grid; gap:16px; }
.book-proposal-form label { display:grid; gap:7px; color:#756454; font-size:12px; }
.book-proposal-form input,.book-proposal-form textarea { width:100%; background:#fffaf0; border:1px solid #c7b79a; border-radius:5px; padding:12px; color:#493b32; font:inherit; font-size:13px; }
.book-proposal-form textarea { resize:vertical; }
.book-proposal-form .button,.book-empty .button { background:#81473d; color:#fff3de; font-size:12px; padding:13px 18px; }
.book-proposal-status { display:inline-block; font-size:10px; padding:6px 10px; border:1px solid #b49c77; border-radius:20px; color:#876644; margin-bottom:14px; }
.book-story-text { max-height:200px; overflow:auto; scrollbar-width:thin; }
.book-event-memory { margin-top:20px; padding-top:20px; border-top:1px dashed #c4ad87; }
.book-event-memory h3 { font-size:20px; margin:0 0 10px; }
.book-curl-sheet { position:absolute; inset:0; pointer-events:none; transform-style:preserve-3d; z-index:12; }
.curl-band { position:absolute; top:0; left:0; transform-origin:left center; transform-style:preserve-3d; will-change:transform; }
.curl-face { position:absolute; top:0; left:0; height:100%; overflow:hidden; backface-visibility:hidden; background:#f4ecd9; transform-style:flat; }
.curl-front { transform:translateZ(.25px); }
.curl-back { transform:rotateY(180deg) translateZ(.25px); }
.curl-page-snapshot { position:absolute!important; top:0; margin:0!important; max-width:none!important; box-shadow:none!important; border-radius:0!important; box-sizing:border-box; }
.curl-light { position:absolute; inset:0; background:#322518; pointer-events:none; }
.book-curl-shadow { position:absolute; z-index:5; background:linear-gradient(90deg,transparent,#24190eba 45%,#24190e8a 70%,transparent); pointer-events:none; border-radius:8px; }
.book-art-page { position:absolute; inset:0; overflow:hidden; border-radius:inherit; }
.book-art-page>img { position:absolute; top:-4.3%; width:214.5%; max-width:none; height:109.2%; object-fit:fill; }
.book-art-left>img { left:-6.7%; }
.book-art-right>img { left:-107.3%; }
.book-illustrated-spread>.book-page { padding:0; }
.book-illustrated-spread .book-page-number,.book-under-illustration .book-page-number { opacity:0; }
.book-art-transcript { max-width:800px; margin:22px auto 0; color:#4c514e; font-size:13px; }
.book-art-transcript summary { cursor:pointer; padding:10px; text-align:center; }
.book-art-transcript>div { padding:15px 25px; background:#f6eedb; border-radius:10px; }
.book-art-transcript p { line-height:1.7; }
.book-art-actions { text-align:center; margin-top:12px; }
.proposal-review { padding:25px; border-bottom:1px solid #ccc0ae; }
.proposal-review form { display:flex; flex-wrap:wrap; gap:12px; align-items:end; margin-top:15px; }
.proposal-review label { display:grid; gap:7px; font-size:12px; }
.proposal-review select { max-width:300px; }
.achievement-grid .achievement-icon { height:auto; width:100%; }
.achievement-grid .achievement-icon img { aspect-ratio:2/3; width:100%; height:auto; }
.mini-cards .achievement-icon { height:auto; }
.mini-cards .achievement-icon img { aspect-ratio:2/3; }
.mini-cards .achievement-card { height:auto; min-height:205px; }
.achievement-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
@media(max-width:900px) {
  .achievement-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .book-page { padding:30px 24px 42px; min-height:650px; }
  .book-card-pair { gap:12px; }
  .book-title-page h2 { font-size:39px; }
}
@media(max-width:650px) {
  .achievement-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .diary-layout { padding:32px 18px; margin:0; width:100%; }
  .diary-heading { display:block; margin-bottom:22px; }
  .diary-heading>p { display:none; }
  .book-tabs { gap:4px; }
  .book-tabs button { padding:11px 10px; font-size:10px; }
  .book-scene { padding:15px 45px 25px 7px; perspective:1000px; }
  .diary-book { transform:none; }
  .book-spread { grid-template-columns:1fr; }
  .book-page { min-height:0; padding:30px 27px 43px; }
  .book-left { border-radius:6px 6px 0 0; box-shadow:inset 0 -12px 22px -20px #634a32; }
  .book-right { border-radius:0 0 6px 6px; box-shadow:inset 0 12px 22px -20px #634a32; border-top:1px solid #d8c9a9; }
  .book-spine { display:none; }
  .book-ribbon { left:auto; right:23px; }
  .book-page-inner h2 { font-size:29px; }
  .book-title-page h2 { font-size:46px; }
  .book-card-pair { margin-bottom:18px; gap:22px; }
  .book-card-pair .achievement-card:nth-child(2) { margin-top:15px; }
  .book-controls { gap:12px; }
  .book-controls>span { min-width:0; flex:1; }
  .book-controls strong { font-size:11px; }
  .book-arrow { flex-shrink:0; }
  .book-cover { background-image:none; inset:-9px -8px; border-radius:25px; background-color:#172735; background-image:repeating-linear-gradient(90deg,transparent 0 2px,#ffffff08 2px 3px),repeating-linear-gradient(0deg,transparent 0 2px,#ffffff09 2px 3px); }
  .book-art-page { position:relative; width:100%; aspect-ratio:716/938; }
  .book-print-page { position:relative; width:100%; aspect-ratio:3/4; }
  .book-page-image { position:relative; width:100%; aspect-ratio:2/3; }
  .book-page:has(>.book-page-image) { padding:0; }
  .book-bookmarks { right:-39px; gap:12px; top:9%; }
  .book-bookmark { width:48px; height:58px; padding:6px 5px 5px 7px; font-size:13px; }
  .book-bookmark svg { width:23px; height:23px; }
  .book-bookmark:before { inset:4px 7px 4px 5px; }
  .book-bookmark.active,.book-bookmark:hover { transform:translateX(3px); }
  .book-illustrated-spread>.book-page { padding:0; }
  .book-illustrated-spread>.book-left { border-radius:18px 18px 0 0; }
  .book-illustrated-spread>.book-right { border-radius:0 0 18px 18px; }
}

/* Resident reference: painted plum binding, cream-pink paper and floral borders. */
.book-scene { padding:75px 75px 45px; }
.diary-book { max-width:1060px; border-radius:6px; }
.book-cover { inset:-4.2% -6.7% -6%; background-image:url('/assets/book/resident-book.webp'); filter:drop-shadow(0 12px 13px #3f14253b); }
.book-page { container-type:inline-size; min-height:740px; color:#3e1428; background-color:#f8dfce; background-image:url('/assets/book/resident-book.webp'); background-size:226% 111%; padding:60px 42px; }
.book-left { border-radius:7px 0 0 7px; background-position:11% 50%; }
.book-right { border-radius:0 7px 7px 0; background-position:90% 50%; }
.book-page-inner h2 { color:#3e1428; }
.book-spine { width:10px; left:calc(50% - 5px); background:linear-gradient(90deg,transparent,#5f21363a,transparent); }
.book-bookmarks { display:flex; gap:12px; top:-41px; right:5%; }
.book-bookmark { width:130px; height:53px; padding:8px 12px; border:2px solid #452631; border-radius:7px 6px 1px 1px; clip-path:none; font:700 25px/1 Caveat,cursive; transform:rotate(1deg); color:#3c202b; background-color:#c5cfae; filter:drop-shadow(2px 2px 1px #3f172849); }
.book-bookmark:before,.book-bookmark svg { display:none; }
.bookmark-profile { background-color:#dfa5b5; transform:rotate(-2deg); }
.bookmark-stories { background-color:#ddc7a5; }
.book-bookmark.active,.book-bookmark:hover { transform:translateY(-6px); color:#3e1428; }
.book-bookmark:focus-visible { outline:2px solid #742d49; outline-offset:3px; }
.book-page>.book-print-page,.book-page>.book-art-page,.book-page>.book-page-image { inset:5% 5%; }
.book-page-number { color:#8e4e63; }
.resident-sheet { position:absolute; inset:0; overflow:hidden; color:#3b1025; font-family:Georgia,'Times New Roman',serif; }
.resident-sheet .book-print-page { pointer-events:none; }
.resident-sheet h3 { margin:0 0 8px; color:inherit; font:bold clamp(15px,4.2cqw,27px)/1.1 Georgia,'Times New Roman',serif; }
.resident-name { position:absolute; left:11%; top:18.1%; width:77%; height:8.5%; display:flex; align-items:center; justify-content:center; text-align:center; font:bold clamp(17px,5.8cqw,34px)/1.05 Georgia,'Times New Roman',serif; overflow:auto; overflow-wrap:anywhere; }
.resident-long-name { font-size:clamp(14px,4cqw,23px); }
.resident-photo { position:absolute; left:9.2%; top:31.7%; width:31.3%; height:29.6%; overflow:hidden; background:#d9c9be; }
.resident-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.resident-photo svg { display:block; height:100%; width:100%; fill:#ad9a90; }
.resident-field { display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 7px; min-width:0; }
.resident-field dt { font-weight:bold; }
.resident-field dd { flex:1; margin:0; min-width:0; border-bottom:1px solid #966c6c; overflow-wrap:anywhere; white-space:pre-wrap; }
.resident-basics { position:absolute; left:49%; top:34%; width:36%; height:25%; margin:0; display:grid; align-content:space-between; font-size:clamp(13px,3.7cqw,23px); }
.resident-study { position:absolute; left:16%; top:68%; width:70%; height:24%; margin:0; overflow:auto; }
.resident-study p { margin-top:18px; font-size:clamp(13px,3.6cqw,22px); line-height:1.6; white-space:pre-wrap; overflow-wrap:anywhere; background:repeating-linear-gradient(transparent 0 1.5em,#a679742f 1.5em calc(1.5em + 1px)); }
.resident-contacts { position:absolute; left:13%; top:10%; width:72%; height:21%; margin:0; overflow:auto; }
.resident-contacts dl { margin:9px 0 0; display:grid; gap:8px; font-size:clamp(11px,2.8cqw,18px); line-height:1.2; }
.resident-contacts .resident-field dt { display:flex; align-items:center; gap:6px; }
.resident-contacts .resident-field dt:before { content:"☎"; display:grid; place-items:center; width:20px; height:20px; border:1px solid #46192b; border-radius:4px; color:#fce3d6; background:#8b405b; font:bold 13px/1 Arial,sans-serif; }
.resident-contacts .resident-field:nth-child(2) dt:before { content:"➤"; }
.resident-contacts .resident-field:nth-child(3) dt:before { content:"VK"; font-size:10px; }
.resident-contacts .resident-field:nth-child(4) dt:before { content:"@"; }
.resident-about { position:absolute; left:18%; top:37%; width:69%; height:23%; margin:0; }
.resident-about p { max-height:calc(100% - 40px); overflow:auto; margin:0; font-size:clamp(13px,3.3cqw,20px); line-height:1.7; white-space:pre-wrap; overflow-wrap:anywhere; background:repeating-linear-gradient(transparent 0 1.6em,#a679743a 1.6em calc(1.6em + 1px)); scrollbar-width:thin; }
.resident-notes { position:absolute; left:17%; top:85%; width:38%; max-height:8%; overflow:auto; font:clamp(12px,2.8cqw,17px)/1.4 Caveat,cursive; }
.resident-notes a { color:#713047; text-underline-offset:3px; }
.book-page:has(>.resident-sheet) .book-page-number { display:none; }
@media(max-width:900px) and (min-width:651px) {
  .book-scene { padding:65px 35px 40px; }
  .book-page { min-height:620px; padding:45px 28px; }
  .book-bookmark { width:100px; height:46px; font-size:22px; }
}
@media(max-width:650px) {
  .book-scene { padding:55px 15px 30px; }
  .book-cover { background:url('/assets/book/resident-book.webp') center/100% 100% no-repeat; background-color:transparent; inset:-1.5% -6% -3%; border-radius:5px; }
  .book-page { min-height:0; padding:40px 25px; background-size:226% 111%; }
  .book-left,.book-illustrated-spread>.book-left { border-radius:5px 5px 0 0; }
  .book-right,.book-illustrated-spread>.book-right { border-radius:0 0 5px 5px; border-top:1px solid #b77588; }
  .book-bookmarks { top:-32px; right:0; gap:6px; }
  .book-bookmark { width:80px; height:40px; font-size:20px; padding:7px; }
  .book-bookmark.active,.book-bookmark:hover { transform:translateY(-4px); }
  .book-page:has(>.resident-sheet) { aspect-ratio:3/4; min-height:0; padding:0; }
  .resident-sheet .book-print-page { position:absolute; aspect-ratio:auto; }
  .book-page>.book-print-page,.book-page>.book-art-page,.book-page>.book-page-image { inset:auto; width:90%; margin:5% auto; }
  .resident-sheet h3 { margin-bottom:5px; }
  .resident-contacts dl { margin-top:5px; gap:4px; font-size:10px; }
  .resident-contacts .resident-field dt:before { width:13px; height:13px; font-size:9px; }
  .resident-contacts .resident-field:nth-child(3) dt:before { font-size:7px; }
  .resident-field { gap:2px 5px; }
  .resident-about p { max-height:calc(100% - 24px); font-size:12px; }
  .resident-study p { margin-top:8px; font-size:12px; }
}