/* Diary round 3 polish: same-position paper flip, compact page 2/3, arrow-only cues. Scoped to #works + farm dialog. */
/* Pinned stage: three reading states flip in place, one spread visible at rest. */
#works.diary-section{height:300svh;min-height:1750px;padding:0;scroll-margin-top:0}
#works .diary-stage{position:sticky;top:0;height:100svh;min-height:600px;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:8px 6%;overflow:hidden}
#works .diary-shade{position:absolute;inset:0;pointer-events:none;opacity:0;background:radial-gradient(ellipse at 50% 50%,#7c556826,transparent 70%)}
#works .diary-caption{margin:0 2%}
#works .binder{flex:0 1 auto}
#works .diary-controls{margin:8px auto 0}
#works .diary-spread{position:relative}
/* page 2 — medical: poster + real copy side by side, two support thumbs */
#works .med-page h3,#works .edu-page h3{font-size:19px;font-weight:400;margin-bottom:14px}
#works .med-page h3 span,#works .edu-page h3 span{font:italic 14px var(--serif);color:#a1828f}
#works .med-feature{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
#works .med-poster{width:100%;height:auto;box-shadow:0 5px 14px #77556418}
/* The original post has a 698 × 898 poster on its left. Show that whole panel,
   without resizing it into a cover crop or changing the source screenshot. */
#works .med-poster-frame{display:block;position:relative;aspect-ratio:698/898;overflow:hidden;padding:0;margin:0;background:none;font-size:0;line-height:0}
#works .med-poster-frame img{width:203.1519%;height:auto;max-width:none;display:block}
/* Small paper-note crop of a few real copy lines; background-crop keeps the source untouched. */
#works .med-note{min-width:0;border:0;background:#fffdf8;padding:8px;margin:32px 0 0;transform:rotate(-2deg);box-shadow:0 4px 10px #77556420;cursor:zoom-in;display:flex;flex-direction:column;gap:7px;align-items:stretch}
#works .med-note-img{display:block;position:relative;width:100%;aspect-ratio:600/225;overflow:hidden}
#works .med-note-img img{position:absolute;left:-132.6667%;top:-69.3333%;width:236.3333%;height:auto;max-width:none;display:block}
#works .med-note-cap{font-size:10px;color:#9b6c7f;letter-spacing:1px}
#works .med-row{display:grid;grid-template-columns:1.04fr 1fr;gap:14px;margin-top:18px;align-items:start}
#works .med-thumb{height:auto;overflow:hidden}
#works .med-thumb:last-child{margin-top:6px}
#works .med-thumb img{width:100%;height:auto;display:block;background:#fffdf8}
/* Two rows of complete screenshots, including each post's lower copy. */
#works .edu-collage{--edu-height:clamp(170px,22vh,215px);display:grid;grid-template-columns:1fr 1fr;gap:16px 18px;align-items:start;justify-items:center}
#works .edu-card{width:min(100%,calc(var(--edu-height)*var(--image-ratio) + 10px));min-width:0;height:auto;box-shadow:0 4px 12px #77556416;background:#fffdf8}
#works .edu-card img{width:100%;height:auto;display:block}
#works .edu-card.c1{--image-ratio:.522907}
#works .edu-card.c2{--image-ratio:.533333;margin-top:9px}
#works .edu-card.c3{--image-ratio:.532925;transform:rotate(-1deg)}
#works .edu-card.c4{--image-ratio:.75;transform:rotate(1deg)}
#works .edu-more{margin:14px 0 0;text-align:left}
#works .med-page .page-corner,#works .edu-page .page-corner{bottom:10px}
#works .mini-link{border:0;background:none;padding:0;font-size:11px;color:#9b6c7f;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* page 3 — asymmetric: left heavy, right light */
#works #spread-viral{grid-template-columns:1.55fr 1fr}
#works .binder[data-page="2"] .binder-rings{left:60.8%}
#works .viral-main{display:flex;flex-direction:column;gap:10px}
#works .viral-main .page-overline{position:static;font-size:12px;color:#937582}
#works .viral-main .threads-original{height:190px;overflow:hidden;box-shadow:0 6px 18px #77556418}
#works .viral-main .threads-original img{width:100%;height:100%;object-fit:cover;object-position:top center}
#works .viral-main .real-metric{font:52px/1.2 var(--serif);color:#a56f83;margin:0}
#works .viral-main .real-metric span{font:16px var(--sans)}
#works .viral-points{display:flex;flex-direction:column;gap:7px}
#works .viral-points p{display:flex;gap:9px;align-items:baseline;margin:0;font-size:12.5px;line-height:1.65;color:#76606a}
#works .viral-points strong{font-weight:600;color:#9d6077;white-space:nowrap}
#works .viral-side h3{font-size:16px;font-weight:400;margin-bottom:12px}
#works .viral-side h3 span{font:italic 12px var(--serif);color:#a1828f}
/* XHS backend screenshot: original ratio, full height incl. trend chart; note fills the side space. */
#works .xhs-wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:14px;align-items:center}
#works .xhs-shot{height:auto;width:100%;overflow:hidden;box-shadow:0 4px 12px #77556416;background:#fffdf8}
#works .xhs-shot img{width:100%;height:auto;display:block}
#works .xhs-context{min-width:0}
#works .xhs-result{margin:0 0 20px;font-size:15px;line-height:1.9;color:#76606a}
#works .xhs-result span{white-space:nowrap}
#works .xhs-note{font-size:10.5px;color:#a2909a;line-height:1.7;margin:0}
/* arrow-only corner cues keep click + keyboard + aria */
#works .page-corner{gap:0}
#works .page-corner span{font-size:22px}
#works .page-corner:after{opacity:.5}
/* farm easter egg */
#farm-dialog{max-width:560px;width:92vw;padding:26px 26px 22px}
#farm-dialog h2{font-size:19px;margin-bottom:14px}
#farm-dialog .farm-shot{display:block;width:100%;height:auto;border:3px solid #fffdf6;box-shadow:0 6px 18px #754b6926;image-rendering:auto}
#farm-dialog button{margin-top:14px}
@media(min-width:1001px) and (max-height:800px){
 #works .med-feature{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}
 #works .viral-main .threads-original{height:160px}
}
@media(max-width:650px){
 #works.diary-section{height:auto;min-height:0;padding:10px 4% 45px}
 #works .diary-stage{position:static;height:auto;min-height:0;overflow:visible;padding:0}
 #works .diary-shade{display:none}
 #works .diary-spread+.diary-spread{margin-top:26px}
 #works #spread-viral{grid-template-columns:1fr}
 #works .binder[data-page="2"] .binder-rings{left:0;right:0}
 #works .med-feature{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:12px}
 #works .med-poster{width:100%;height:auto}
 #works .med-note{margin-top:8px}
 #works .med-row{gap:12px;margin-top:16px}
 #works .edu-collage{gap:14px 12px}
 #works .edu-card{width:100%}
 #works .xhs-wrap{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px}
 #works .xhs-result{font-size:14px;margin-bottom:16px}
}
@media(prefers-reduced-motion:reduce){#works .diary-spread{transform:none!important;opacity:1!important}#works .diary-shade{display:none}}
/* Round 4: real book flip — a single sheet lifts from the spine, front/back faces, fold shade. */
#works .binder{position:relative}
#works .flip-sheet{position:absolute;top:12px;bottom:12px;width:calc(50% - 12px);z-index:8;transform-style:preserve-3d;pointer-events:none}
#works .flip-sheet.forward{left:50%;transform-origin:left center}
#works .flip-sheet.backward{right:50%;transform-origin:right center}
#works .flip-face{position:absolute;inset:0;backface-visibility:hidden;overflow:hidden;background:#fffcf6;border-radius:4px;box-shadow:0 12px 34px #7c556840;filter:brightness(calc(1 - var(--fold-shade,0)*.16))}
#works .flip-face.back{transform:rotateY(180deg)}
#works .flip-face>.paper-half,#works .half-overlay>.paper-half{position:absolute;inset:0;width:100%;height:100%;margin:0;overflow:hidden;border-radius:4px}
#works .half-overlay{position:absolute;top:12px;bottom:12px;width:calc(50% - 12px);z-index:6;overflow:hidden;pointer-events:none;background:#fffcf6;border-radius:4px;box-shadow:0 4px 16px #7c556826}
#works .half-overlay.left{left:12px}
#works .half-overlay.right{right:12px}
#works .binder.is-turning{pointer-events:none}