/* Journal pages: annotations stay alongside their own photograph. */
.page{display:flex;align-items:center;min-width:0}
.journal-content{position:relative;inset:auto;width:100%;padding:7%;gap:24px;align-self:center;justify-content:center}
.journal-row{display:flex;align-items:center;justify-content:center;width:100%;gap:6%;min-width:0}
.journal-figure{width:60%;flex-shrink:0;min-width:0}.journal-row.portrait:not(.has-note) .journal-figure{width:43%}
.journal-row.has-note .journal-figure{width:56%}.journal-figure .ph{width:100%;display:block}.journal-figure .m{display:block}
.photo-meta{border:0;background:none;padding:12px 0 0;display:flex;align-items:baseline;gap:8px;width:100%;text-align:left;cursor:pointer;color:#948775;line-height:1.6;font:9px/1.7 var(--f-mono)}
.photo-meta b{font-weight:500;color:#6c5f4d}.photo-meta span{flex:1;overflow-wrap:anywhere;letter-spacing:0}.photo-meta i{width:10px;flex-shrink:0;opacity:.35}.photo-meta svg{width:10px;height:10px}.photo-meta:hover i{opacity:1}
.hand-note{all:unset;box-sizing:border-box;display:block;width:38%;flex-shrink:0;font:15px/23px var(--f-hand);color:#756452;white-space:pre-wrap;overflow-wrap:anywhere;background:repeating-linear-gradient(to bottom,transparent 0,transparent 22px,#c9bfad85 22px,#c9bfad85 23px);cursor:pointer;padding:0 1px;letter-spacing:.02em;align-self:center;text-align:left}
.hand-note:focus-visible,.photo-meta:focus-visible{outline:1px solid #8d7a60;outline-offset:5px}
.book.wide{width:min(100%,1100px)}.book.narrow{width:min(100%,540px)}
.device-cabinet{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px 38px;max-width:1140px;margin:10px auto 40px}
.device-card{all:unset;cursor:pointer;min-width:0;display:block;padding:12px 0 22px;position:relative}
.device-stage{height:240px;display:flex;justify-content:center;align-items:center;position:relative;isolation:isolate;perspective:900px}
.device-stage:before{content:'';position:absolute;left:4%;right:4%;bottom:9px;height:33px;border-radius:50%;background:radial-gradient(ellipse,#77664b30,transparent 70%);filter:blur(8px);z-index:-1}
.device-card:after{content:'';position:absolute;left:0;right:0;bottom:55px;height:6px;background:linear-gradient(#e6dfd3,#fffaf0 25%,#c8bca8 50%,#ddd2bf 85%,#b6a58d);box-shadow:0 7px 9px -5px #84715365;border-radius:2px;z-index:-1}
.device-label{display:flex;align-items:baseline;justify-content:space-between;margin-top:27px;font-size:12px;color:#655d51;letter-spacing:.03em}.device-label small{font:10px var(--f-mono);color:#a09483}
.device-card:hover .phone-model{transform:rotate(-7deg) rotateY(-14deg) translateY(-6px)}.unassigned{display:block;border:0;border-bottom:1px solid #c8bfae;background:none;color:#958976;font-size:11px;padding:8px 0;margin:0 auto 40px;cursor:pointer}
.named-rolls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:40px}.named-roll{all:unset;display:flex;flex-direction:column;align-items:center;cursor:pointer;min-width:0}.named-roll canvas{width:100%;height:auto}.roll-paper{font:18px/1.5 var(--f-hand);background:#efeadc;padding:5px 24px;box-shadow:0 2px 4px #5f4f3420;transform:rotate(-2deg);max-width:100%;overflow-wrap:anywhere}.named-roll small{font:10px var(--f-mono);color:#958774;margin-top:16px}
.device-wall{columns:4;column-gap:23px;padding:10px 0 40px}.wall-print{all:unset;display:block;box-sizing:border-box;break-inside:avoid;width:100%;margin:0 0 23px;padding:9px 9px 12px;background:#faf8ef;box-shadow:0 2px 3px #61513c1a,0 6px 12px #61513c12;cursor:zoom-in;transition:transform .2s}.wall-print:hover{transform:translateY(-3px)}.wall-print img{display:block;width:100%;height:auto;min-height:60px;background:#e5e0d7}.wall-meta{display:block;padding:9px 3px 0;color:#a09380;font-size:9px;line-height:1.6;overflow-wrap:anywhere}
.device-empty{text-align:center;padding:100px 20px;color:#a09788;font-size:12px}.device-empty svg{width:32px;height:32px}.device-empty button{border:1px solid #bdb29e;border-radius:3px;background:transparent;padding:10px 18px;color:#78664e;cursor:pointer}
.photo-dialog{width:min(520px,calc(100vw - 32px));max-height:90vh;overflow:auto;border:1px solid #d2c7b6;border-radius:8px;padding:27px;background:#f6f2e9;box-shadow:0 35px 120px #201d1750;color:#675b49}.photo-dialog::backdrop{background:#241f1c77;backdrop-filter:blur(6px)}.photo-dialog fieldset{border:0;padding:0;margin:0}.photo-dialog h2{font:20px var(--f-serif);margin:0}.photo-dialog #pPreview{display:block;height:135px;max-width:100%;object-fit:contain;margin:12px auto 25px;box-shadow:0 3px 8px #0002}.caption-input{font:17px/28px var(--f-hand)!important;background:repeating-linear-gradient(transparent 0,transparent 27px,#c9bfad70 27px,#c9bfad70 28px)!important;border:0!important;resize:vertical;padding:0!important;min-height:112px;color:#756452}.v-edit{position:fixed;right:78px;top:24px;color:#e7dfd2;z-index:3}#photoStatus{color:#9b573b;font-size:12px}
@media(max-width:1000px){.device-cabinet{gap:20px}.device-stage{height:220px}.device-wall{columns:3}}
@media(max-width:760px){.device-cabinet{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}.device-stage{height:200px}.device-stage .phone-model{scale:.85}.device-stage .camera-model{scale:.66}.device-label{font-size:10px;min-height:28px;gap:4px}.device-card:after{bottom:67px}.device-label small{font-size:9px}.device-stage canvas{width:135%;max-width:none;flex-shrink:0}.named-rolls{grid-template-columns:repeat(2,minmax(0,1fr));gap:25px 10px}.roll-paper{font-size:16px;padding-inline:14px}.device-wall{columns:2;column-gap:13px}.wall-print{padding:6px;margin-bottom:13px}.wall-meta{font-size:8px}.hand-note{font-size:14px;line-height:23px}.photo-meta{font-size:8px;gap:5px;padding-top:8px}.journal-content{padding:7%;gap:20px}.book.narrow{width:min(100%,460px)}.journal-row.has-note .journal-figure{width:52%}.hand-note{width:42%}.v-edit{top:19px;right:65px}.rail .ib{width:46px}}
@media(prefers-reduced-motion:reduce){.device-card *,.wall-print{transition:none!important}}

.journal-row:only-child:not(.has-note) .journal-figure{width:78%}.journal-row.portrait:only-child:not(.has-note) .journal-figure{width:54%}
.device-search{border:0;border-bottom:1px solid #b9ac96;background:transparent;width:180px;padding:8px 0;color:var(--ink-2);font:12px var(--f-mono)}
@media(max-width:760px){.device-search{order:5;width:100%}}
.journal-row.has-note{align-items:flex-start}.hand-note{align-self:flex-start}
.book .page{width:100%;max-width:100%;aspect-ratio:auto}.spread{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.spread.single{grid-template-columns:minmax(0,1fr)}


.device-card:hover .camera-model{transform:rotate(-3deg) rotateY(-6deg) translateY(-6px)}
.device-card:focus-visible,.named-roll:focus-visible,.wall-print:focus-visible{outline:2px solid #887254;outline-offset:7px;border-radius:3px}
.device-stage canvas{width:100%;height:100%;object-fit:contain;transform:scale(.95)}
.phone-model{position:relative;width:103px;height:192px;flex-shrink:0;border-radius:18px;transform:rotate(-8deg) rotateY(-17deg);transition:transform .45s}
.phone-edge{position:absolute;inset:4px;border:1px solid #a7b8bd55;border-radius:15px}
.phone-cameras{position:absolute;top:10px;left:10px;width:51px;height:54px;border-radius:13px}
.glass-lens{position:absolute;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 41% 35%,#6293b7 0,#243f57 9%,#070e18 22%,#233242 32%,#080d12 44%,#17212b 54%,#02070a 57%,#566974 62%,#172e3b 74%,#c4d2d4 80%,#274653 87%);box-shadow:0 1px 2px #0008,inset 1px 1px 1px #e6ebe578;top:5px;left:4px}
.glass-lens:nth-child(2){top:29px}.glass-lens:nth-child(3){top:17px;left:27px}
.flash-dot{position:absolute;right:7px;top:5px;width:8px;height:8px;border-radius:50%;background:radial-gradient(#f0ecdc,#c3baa7);box-shadow:0 0 1px #000}
.sensor-dot{position:absolute;right:8px;bottom:4px;width:7px;height:7px;background:#14212d;border-radius:50%}
.phone-logo{position:absolute;top:101px;left:40px;opacity:.65;color:#ced9d8;font:26px Arial}.phone-logo svg{width:22px;height:26px;fill:#bac9ca}
.phone-button{position:absolute;top:65px;right:-4px;width:3px;height:28px;border-radius:2px;background:linear-gradient(90deg,#2c414b,#b2bdbd,#5e7986)}
.oneplus{height:202px;width:103px;background:linear-gradient(120deg,#e8e9e5,#c5ccc9 52%,#f0f0e7);box-shadow:inset 0 0 0 1px #c1c5bc,inset 2px 0 2px white,inset -3px 0 2px #8a9594,7px 5px 0 -3px #a9b0aa,15px 23px 20px -10px #40332265;transform:rotate(8deg) rotateY(-17deg)}
.oneplus .phone-cameras{width:66px;height:66px;border-radius:50%;top:10px;left:9px;background:linear-gradient(135deg,#d9ded9,#8d999a 35%,#dfe3dd 55%,#9ca7a7);border:2px solid #c1c8c4;box-shadow:0 2px 2px #56656a,0 0 0 1px #8b999c,inset 0 0 0 3px #d8deda}
.oneplus .sensor-dot{display:none}.oneplus .phone-logo{color:#7a8886;left:39px;top:115px;font-size:25px}
@media(max-width:760px){.device-stage canvas{width:135%;max-width:none;flex-shrink:0}}
/* Models redrawn against real product references; see MODEL-REFERENCES.md. */
.iphone{background:linear-gradient(125deg,#575859 0%,#343537 29%,#242528 70%,#414245);box-shadow:inset 0 0 0 1px #8b8d8d,inset 3px 0 2px #b2b5b4,inset -3px 0 2px #111315,7px 5px 0 -3px #56585a,9px 9px 8px -5px #14151790,15px 23px 20px -10px #40332265}
.iphone .phone-cameras{background:linear-gradient(135deg,#626364,#2c2d30);box-shadow:0 1px 2px #080a0d,inset 0 1px 1px #c8c9c470}.iphone .phone-edge{border-color:#b0b3b026}.iphone .phone-logo svg{fill:#969b9c}.iphone .phone-button{background:linear-gradient(90deg,#202124,#969b9c,#494b4d)}
.iphone .glass-lens{filter:saturate(.35)}
.oneplus .glass-lens{background:radial-gradient(circle at 41% 35%,#54718d 0,#172435 8%,#080b12 19%,#1c2531 31%,#080b10 44%,#10151a 53%,#020506 61%,#484e51 66%,#0a0e12 73%,#10141a 89%,#747d80 94%,#252c31 100%);width:19px;height:19px}
.oneplus .glass-lens:nth-child(1){top:9px;left:9px}.oneplus .glass-lens:nth-child(2){top:33px;left:9px}.oneplus .glass-lens:nth-child(3){top:9px;left:33px}.oneplus .glass-lens:nth-child(4){top:33px;left:33px}
.oneplus .fourth-lens{background:radial-gradient(circle,#0d1116 0 33%,#1c2228 35% 48%,#090c10 50% 63%,#50575b 65% 68%,#0b1015 70% 91%,#697277 94%,#252c31 100%)}
.oneplus .flash-dot{top:40px;right:16px;width:5px;height:5px;z-index:1;background:radial-gradient(#e7e5dc,#8d918e);box-shadow:0 0 1px #000}.oneplus .hasselblad{position:absolute;top:26px;left:28px;font:italic 6px Arial;color:#59656b;line-height:8px}
.camera-model.reference-model{position:relative;width:252px;flex-shrink:0;transform:rotate(-5deg) rotateY(-9deg);transition:transform .45s;filter:drop-shadow(2px 3px 1px #17191960) drop-shadow(8px 14px 8px #39312845)}
.camera-model.reference-model img{display:block;width:100%;height:auto;pointer-events:none;user-select:none}
.camera-model.reference-model.fuji{width:260px;transform:rotate(-5deg) rotateY(-9deg)}
@media(max-width:760px){.device-stage .camera-model.reference-model{scale:.66}}
.device-card:hover .camera-model.reference-model{transform:rotate(-3deg) rotateY(-6deg) translateY(-6px)}

.default-film{display:block;width:100%;height:230px;object-fit:contain}.named-roll img.default-film{height:220px}.photo-meta,.hand-note{cursor:default}.rolls{align-items:start}.named-roll small{color:#948775;font:10px var(--f-mono);margin-top:15px}
@media(max-width:760px){.named-roll img.default-film{height:160px}}
.device-roll-groups{margin-bottom:40px;border-bottom:1px solid #bfb29c55;padding-bottom:30px}.device-stage>img{width:100%;height:100%;object-fit:contain}
.coll-description{font:11px/1.7 var(--f-serif);letter-spacing:.02em;color:#9b8b73;margin:8px 0 0;white-space:pre-wrap;overflow-wrap:anywhere;max-width:650px}
.named-roll .default-film{height:220px;object-fit:contain}@media(max-width:760px){.named-roll .default-film{height:160px}}
/* Mixed print rows: each unit keeps its own note at the photograph's side. */
.journal-content{display:flex;position:relative;inset:auto;width:100%;padding:7%;gap:22px;align-items:center;justify-content:center;min-width:0}.journal-group{display:flex;align-items:flex-start;gap:4.5%;min-width:0;max-width:100%}.journal-unit{display:flex;flex-flow:row nowrap;align-items:flex-start;gap:5.5%;min-width:0;break-inside:avoid}.journal-unit .journal-figure{display:block;flex:1 1 0;width:100%;min-width:0}.journal-unit.has-note .journal-figure{flex:0 0 var(--figure-share,56%);width:var(--figure-share,56%)}.journal-unit .ph{display:block;width:100%}.journal-unit .m{display:block}.journal-unit .hand-note{all:unset;box-sizing:border-box;display:block;flex:0 0 var(--note-share,38.5%);width:var(--note-share,38.5%);min-width:0;font:15px/23px var(--f-hand);color:#756452;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;background:repeating-linear-gradient(to bottom,transparent 0,transparent 22px,#c9bfad85 22px,#c9bfad85 23px);letter-spacing:.02em;align-self:flex-start;padding:0 1px;text-align:left}.journal-unit .photo-meta{font-size:9px;line-height:1.65;padding-top:9px;gap:6px}.journal-unit .photo-meta span{min-width:0}.journal-content .journal-unit .journal-figure{max-width:100%}.coll-description{font-size:12px;line-height:1.75;max-width:740px;margin:5px 0 0}.card .cap b{font-family:var(--f-hand);font-size:24px;line-height:1.25}
@media(max-width:760px){.journal-unit .hand-note{font-size:14px;line-height:23px}.journal-unit .photo-meta{font-size:8px;gap:4px;padding-top:8px}.journal-content{padding:7%}.coll-description{font-size:11px;line-height:1.65;max-width:100%}.card .cap b{font-size:21px}}
/* Fixed leaves; only the number of visible note lines changes between layouts. */
.book .spread{height:var(--page-height);min-height:var(--page-height);max-height:var(--page-height)}.book .page,.book .face2>.page{height:var(--page-height);min-height:var(--page-height);max-height:var(--page-height);overflow:hidden;align-items:stretch}.book .journal-content{height:100%;max-height:100%;min-height:0;overflow:hidden;align-self:stretch;flex-shrink:0}.journal-group{flex-shrink:0;max-height:100%}.journal-unit{height:100%;max-height:100%}.journal-unit .hand-note{max-height:calc(var(--note-lines,1)*23px);overflow:hidden}.journal-unit .hand-note.is-clamped{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:var(--note-lines,1);line-clamp:var(--note-lines,1);cursor:pointer;text-overflow:ellipsis}.journal-unit .hand-note.is-clamped:hover{color:#584934}.journal-unit .hand-note.is-clamped:focus-visible{outline:1px solid #8a775b;outline-offset:4px}.note-detail-dialog{width:min(640px,calc(100vw - 32px));max-height:85svh;padding:0;border:1px solid #d2c7b6;border-radius:7px;background:var(--leaf);color:#756452;box-shadow:0 35px 120px #201d1750;overflow:hidden}.note-detail-dialog[open]{display:flex;flex-direction:column}.note-detail-dialog::backdrop{background:#241f1c77;backdrop-filter:blur(6px)}.note-detail-head{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:19px 25px 15px;border-bottom:1px solid #d4c7b44d;background:var(--leaf);gap:20px}.note-detail-head h2{margin:0;font:17px var(--f-serif);letter-spacing:.08em;color:#82745d}.note-detail-head .ib{width:36px;height:36px;flex-shrink:0}.note-detail-scroll{overflow-y:auto;overscroll-behavior:contain;min-height:0;flex:1;padding:23px 29px 30px}.note-detail-text{margin:0;font:19px/1.8 var(--f-hand);letter-spacing:.02em;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal}.book .flipper{height:var(--page-height);max-height:var(--page-height)}
@media(max-width:760px){.note-detail-dialog{max-height:84svh}.note-detail-head{padding:14px 18px 11px}.note-detail-scroll{padding:18px 22px 25px}.note-detail-text{font-size:18px;line-height:1.8}}
/* One shared content rectangle per leaf; templates place ordered prints inside it. */
.book .journal-content{display:block;position:relative;inset:auto;align-self:stretch;justify-content:initial;align-items:initial;padding:7%;height:100%;width:100%;overflow:hidden}.journal-canvas{position:relative;width:100%;height:100%;min-height:0}.journal-canvas .journal-unit{position:absolute;display:flow-root;min-width:0;max-width:100%;max-height:none;overflow:hidden;break-inside:avoid;gap:0;flex:none;box-sizing:border-box}.journal-canvas .journal-unit .journal-figure{display:block;float:none;flex:none;max-width:100%;min-width:0}.journal-canvas .journal-unit.has-note{font:15px/23px var(--f-hand);letter-spacing:.02em;white-space:normal;overflow-wrap:anywhere;word-break:normal}.journal-canvas .journal-unit.has-note .journal-figure{float:left;flex:none;max-width:none;box-sizing:border-box}.journal-canvas .journal-unit .ph{display:block;width:100%;height:auto}.journal-canvas .journal-unit .m{display:block}.journal-canvas .photo-meta{font:9px/1.65 var(--f-mono);letter-spacing:0;padding-top:9px;gap:6px;white-space:normal}.note-flow-text{display:inline;font:inherit;line-height:23px;letter-spacing:inherit;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;color:#756452;background:none;text-decoration-line:underline;text-decoration-color:#c9bfad85;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-skip-ink:none;-webkit-box-decoration-break:clone;box-decoration-break:clone}.note-flow-text.is-truncated{cursor:pointer}.note-flow-text.is-truncated:hover{color:#584934}.note-flow-text.is-truncated:focus-visible{outline:1px solid #8a775b;outline-offset:3px}
@media(max-width:760px){.journal-canvas .journal-unit.has-note{font-size:14px;line-height:23px}.journal-canvas .photo-meta{font-size:8px;line-height:1.65;padding-top:8px;gap:4px}}

/* The lock sits on the physical cover; locked collections keep no public photo list. */
.collection-locked{position:relative}.privacy-lock{position:absolute;right:12px;top:12px;display:flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:#eee9dfde;color:#6f6a5d;box-shadow:0 1px 4px #352d231a;pointer-events:none}