/* App-proportional papers, native swatch contour, and reversible milk-glass pocket. */
.polaroid-chapter,.calendar-trail{display:none}
@media all{
 .intro-hero .hero-films{max-height:calc(100vh - 244px)}
 .calendar-trail{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:3;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
 .polaroid-chapter{display:block;position:relative;scroll-margin-top:76px}
 /* Only the fully opened composition holds; folding starts after sticky release. */
 .memento-scroll-track{--memento-stage-height:max(610px,100vh - 76px);height:calc(var(--memento-stage-height) + clamp(720px,110vh,1280px))}
 .memento-stage{position:sticky;top:76px;height:var(--memento-stage-height);min-height:610px;isolation:isolate}
 .memento-copy{position:relative;padding:28px 0 24px;text-align:center;pointer-events:none;transform:rotate(2deg)}
 .memento-copy h2{font:700 28px/1.25 'Courier Prime',monospace;letter-spacing:.6px;color:var(--gold);margin:0}
 .memento-opening{position:relative;width:min(1200px,calc(100% - 64px));height:100%;margin:auto;--card-width:260px;--palette:0;--notes:0;--caption:0}
 .memento-defs{position:absolute;pointer-events:none}
 .memento-pocket-back,.memento-pocket-front{position:absolute;left:50%;top:0;pointer-events:none;will-change:transform}
 .memento-pocket-back{z-index:0}
 .memento-pocket-front{z-index:4}
 .memento-pocket-back img,.memento-pocket-front img{display:block;width:100%;height:auto}
 /* Use the contour bottom as the hinge, excluding the SVG shadow margin. */
 .memento-pocket-lid{position:relative;transform:perspective(600px) rotateX(var(--lid-angle,0deg));transform-origin:50% 84.37%;backface-visibility:hidden}
 .memento-frost{position:absolute;inset:0;clip-path:url(#memento-pocket-clip);-webkit-backdrop-filter:blur(12px) saturate(.65);backdrop-filter:blur(12px) saturate(.65)}
 .memento-pocket-front img{position:relative}
 @supports not (backdrop-filter:blur(1px)){.memento-frost{background:#f6f4eecc}}
 .memento-card{position:absolute;left:50%;top:0;width:var(--card-width);aspect-ratio:318/424;transform-origin:50% 50%;z-index:3;will-change:transform;--frame:#A66024;--frame-ink:#FDFBF7}
 .diary-card{z-index:2;--frame:#765639}
 .keepsake-card{z-index:1;--frame:#A5A983;--frame-ink:#3E2723;pointer-events:none}
 /* App base: 318×424, padding 30/24/24, photo 270×320, gap 16, metadata 34. */
 .memento-face{display:flex;flex-direction:column;position:relative;width:100%;height:100%;padding:9.4339623% 7.5471698% 7.5471698%;border:0;border-radius:calc(var(--card-width)*8/318);background:var(--frame);color:var(--frame-ink);box-shadow:0 3px 5px #3e272310,0 18px 30px -16px #3e27234d;overflow:hidden;text-align:left;font-family:'Courier Prime',monospace;transition:background-color .2s,color .2s;box-sizing:border-box}
 .color-face{cursor:grab;touch-action:pan-x;user-select:none;transform:translateY(var(--card-lift,0px))}
 .color-face:active{cursor:grabbing}
 .color-card[data-palette-manual=true] .color-face{transition:transform .35s cubic-bezier(.2,.8,.3,1.08),background-color .2s,color .2s}
 .memento-photo{display:block;position:relative;width:100%;flex:1;min-height:0;overflow:hidden}
 .memento-photo svg{display:block;width:100%;height:100%}
 .memento-photo>img{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
 /* Live badge enlarged 1.6× for the web; keep the App inset, proportions and tint. */
 .memento-live-badge{position:absolute;left:calc(var(--card-width)*6/318);top:calc(var(--card-width)*6/318);display:grid;place-items:center;width:calc(var(--card-width)*32/318);height:calc(var(--card-width)*32/318);padding:calc(var(--card-width)*5.6/318);box-sizing:border-box;border-radius:50%;background:#00000052;color:#fff;pointer-events:none}
 .memento-live-badge svg{fill:none;stroke:currentColor;stroke-width:1.3;stroke-linecap:round}
 .memento-live-badge .live-center{fill:currentColor;stroke:none}
 .memento-meta{display:flex;flex:none;flex-direction:column;gap:calc(var(--card-width)*2/318);height:calc(var(--card-width)*34/318);margin-top:calc(var(--card-width)*16/318);white-space:nowrap}
 .memento-shop{font-size:calc(var(--card-width)*14/318);line-height:calc(var(--card-width)*16/318);font-weight:700;letter-spacing:0;overflow:hidden;text-overflow:ellipsis}
 .memento-date{font-size:calc(var(--card-width)*12/318);line-height:calc(var(--card-width)*16/318);font-weight:400;opacity:.65;letter-spacing:.2px}
 .memento-palette{position:absolute;left:0;top:calc(100% - 18px);width:100%;display:flex;justify-content:center;gap:calc(var(--card-width)*10.8/318);opacity:var(--palette);pointer-events:none}
 .memento-palette:not([inert]){pointer-events:auto}
 .memento-palette button{position:relative;flex:none;width:calc(var(--card-width)*40.5/318);height:calc(var(--card-width)*28.35/318);border:0;background:none;filter:drop-shadow(0 .5px 1px #0000001a);cursor:pointer;padding:0}
 .memento-palette button span{position:absolute;inset:0;mask:url('assets/polaroids/vibe-swatch.png') center/contain no-repeat;-webkit-mask:url('assets/polaroids/vibe-swatch.png') center/contain no-repeat;pointer-events:none}
 .swatch-fill{background:var(--swatch)}
 .swatch-ring{background:var(--gold);opacity:0;transform:translate(calc(var(--card-width)*var(--rx)/318),calc(var(--card-width)*var(--ry)/318))}
 .memento-palette button[aria-pressed=true] .swatch-ring{opacity:1}
 .memento-palette button:hover{filter:drop-shadow(0 1px 2px #3e272330)}
 .memento-card button:focus-visible{outline:2px solid var(--gold);outline-offset:5px}
 .memento-caption{position:absolute;top:0;left:50%;width:280px;z-index:5;text-align:center;opacity:var(--caption);pointer-events:none}
 .memento-caption svg{position:absolute;top:calc(100% + 3px);width:100px;height:64px;overflow:visible;fill:none;stroke:var(--gold);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
 .color-caption svg{left:calc(100% - 40px)}
 .diary-caption svg{right:calc(100% - 40px);transform:scaleX(-1)}
 .live-caption svg{left:calc(50% - 50px);width:80px;height:56px}
 .memento-caption p,.memento-scroll-hint{font:400 16px/22px 'Courier Prime',monospace;color:var(--ink);margin:0}
 .memento-caption p{color:#8a7c78}
 .memento-scroll-hint{position:absolute;left:0;right:0;bottom:20px;text-align:center;color:#8E827C;pointer-events:none}
 .memento-notes{position:absolute;inset:0;background:#0009;opacity:var(--notes);pointer-events:none;color:#FDFBF7;padding:16px}
 .memento-demo-note{font:400 16px/22px 'Courier Prime',monospace;white-space:pre-wrap;margin:0;overflow-wrap:anywhere}
 .memento-note-count{position:absolute;bottom:12px;right:12px;font:400 10px/1 'Courier Prime',monospace;color:#C4BCB8}
 .memento-note-trigger{position:absolute;inset:0;background:none;border:0;padding:0;cursor:text}
 .memento-note-editor{position:absolute;inset:0;display:flex;flex-direction:column;gap:8px;padding:16px;background:#0009;color:#FDFBF7}
 .memento-note-editor[hidden]{display:none}
 .memento-note-editor textarea{display:block;width:100%;flex:1;min-height:0;resize:none;border:0;padding:0;background:transparent;color:inherit;caret-color:#FDFBF7;font:400 16px/22px 'Courier Prime',monospace;outline:0}
 .memento-note-editor textarea::placeholder{color:#fdfbf780}
 .memento-note-editor .sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
 .memento-editor-footer{display:flex;align-items:center;justify-content:flex-end}
 /* Native GlassCheckButton: 48×48, 21.33 corner, 24pt CheckSuccess, accent fill. */
 .memento-done{display:grid;place-items:center;flex:none;border:1.4px solid #ffffff1a;border-radius:21.33px;width:48px;height:48px;padding:12px;background:var(--gold);color:#FDFBF7;box-shadow:0 0 8px #3e272329;cursor:pointer}
 .memento-done img{display:block;width:24px;height:24px}
 .memento-done:hover{filter:brightness(1.05)}
 .layout-editing .polaroid-chapter{height:auto}
 .layout-editing .memento-scroll-track{height:auto}
 .layout-editing .memento-stage{position:relative;top:0;height:830px}
 .layout-editing .memento-card{will-change:auto}
}
@media(min-width:801px) and (max-width:1150px){.memento-caption{width:240px}.memento-opening{width:calc(100% - 32px)}}