:root{--paper:#f5f3ed;--ink:#213c32;--line:#d9ddd3;--muted:#657269;--accent:#e7aa7c;font-family:var(--font-ui);color:var(--ink);background:var(--paper);font-synthesis:none}*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}a{color:inherit;text-decoration:none}button{color:inherit}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #d18e62;outline-offset:5px}[hidden]{display:none!important}.site-header{height:102px;display:flex;align-items:center;justify-content:space-between;padding:0 6%;border-bottom:1px solid var(--line)}.wordmark{font-family:Georgia,serif;font-size:43px;letter-spacing:-3px;display:flex;align-items:center;gap:12px}.wordmark span{font-size:30px;font-family:Arial;font-weight:normal;letter-spacing:0}.site-header nav{display:flex;gap:34px;font-size:13px}.text-button{background:none;border:0;padding:12px 0;font-size:13px}.text-button span{margin-left:22px}.hero{display:grid;grid-template-columns:1fr 1fr;min-height:650px}.hero-copy{padding:90px 11% 70px 12%}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:600;line-height:1.8}.hero h1{font-family:var(--font-ui);font-size:clamp(44px,4.7vw,74px);line-height:1.12;letter-spacing:-2px;font-weight:400;margin:29px 0}em{font-weight:400}.intro{font-size:15px;line-height:1.9;max-width:400px;color:#526358}.button{border:1px solid var(--ink);background:var(--ink);color:#fff;padding:17px 22px;display:inline-flex;align-items:center;justify-content:space-between;gap:30px;font-size:12px;min-height:49px}.hero .button{margin-top:25px}.button:hover{background:#345547}.button:disabled{opacity:.45;cursor:not-allowed}.fine-print{font-size:10px;margin-top:18px;color:var(--muted)}.hero-art{position:relative;background:#dfe5db;overflow:hidden;display:flex;align-items:center;justify-content:center;isolation:isolate}.hero-art:before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,#ffffff65,transparent 70%);z-index:-1}.hero-book{width:295px;height:365px;background:#eee8db;padding:23px 26px 18px;transform:rotate(-9deg);box-shadow:15px 25px 22px #394e3433,-3px 0 0 #d1cbbf,inset 5px 0 6px #d4cfc7;position:relative}.book-topline,.book-bottom{font-size:7px;letter-spacing:1.8px;text-align:center}.book-photo{height:185px;margin-top:20px}.hero-book-title{font-family:Georgia,serif;font-size:29px;line-height:1.1;margin:19px 0 14px}.book-bottom{text-align:left}.loose-photo{position:absolute!important;width:190px;height:220px!important;transform:rotate(13deg) translate(150px,-80px);border:10px solid #faf8f2;box-shadow:4px 10px 18px #33402f22}.art-note{position:absolute;right:45px;top:45px;font-family:Georgia,serif;font-style:italic;font-size:15px;max-width:130px;transform:rotate(8deg)}.art-index{position:absolute;bottom:29px;left:30px;font-size:8px;letter-spacing:2px}.tiny-stamp{position:absolute;right:28px;bottom:45px;border:1px solid #47614f66;border-radius:50%;width:88px;height:88px;display:grid;place-content:center;text-align:center;font-size:8px;line-height:1.8;letter-spacing:1px;transform:rotate(15deg)}.landscape{overflow:hidden;position:relative;background:#a8c3c6;isolation:isolate}.landscape:before,.landscape:after{content:'';position:absolute;inset:0;z-index:-1}.scene-1{background:linear-gradient(#bacbce 0 49%,#7d9e9e 49% 72%,#d5c6a6 72%)}.scene-1:before{inset:29% -25% 10% 5%;background:#475c4d;clip-path:polygon(0 65%,35% 9%,55% 48%,74% 31%,100% 73%,100% 100%,0 100%)}.scene-1:after{background:linear-gradient(110deg,transparent 35%,#a2b3a9 35% 38%,transparent 38%);clip-path:polygon(0 0,100% 0,100% 72%,0 72%)}.scene-2{background:linear-gradient(#ddc9b0 0 60%,#879b8d 60%)}.scene-2:before{background:#f4e5cf;inset:25% 20% 20%;clip-path:polygon(0 35%,50% 0,100% 35%,100% 100%,0 100%)}.scene-2:after{background:#ad7457;inset:29% 14% 53%;clip-path:polygon(0 100%,50% 0,100% 100%,94% 100%,50% 16%,6% 100%)}.scene-3{background:linear-gradient(#acd0db 0 48%,#4a8f9c 48% 70%,#dcbf8e 70%)}.scene-3:before{background:#e5a65e;inset:25% 10% 45% 60%;border-radius:50%}.scene-3:after{background:#d9e7d1;inset:60% -20% 20% 0;transform:rotate(-12deg);opacity:.7}.scene-4{background:#d7c5ae}.scene-4:before{inset:15% 22% -15%;background:#f0e5d6;border-radius:50% 50% 18% 18%;transform:rotate(18deg)}.scene-4:after{inset:25% 33% 41%;background:#c69370;border-radius:50%;box-shadow:0 32px 0 10px #a4b0a0}.section{padding:84px 6%}.section-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:36px}.section-heading p:last-child{font-size:13px;line-height:1.8;color:var(--muted)}h2{font-family:var(--font-ui);font-size:43px;font-weight:400;letter-spacing:-1px;line-height:1.2;margin:13px 0}.template-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}.template-card{background:none;border:0;text-align:left;padding:0}.template-stage{height:350px;display:grid;place-items:center;position:relative;background:#e9e5dc}.template-stage.color{background:#e7d4bd}.template-stage.quiet{background:#dde2db}.mini-cover{width:190px;height:245px;background:#f6f2e8;padding:20px;box-shadow:6px 10px 10px #3e3a2e26;transform:rotate(-6deg);font-family:Georgia,serif;display:flex;flex-direction:column;justify-content:space-between}.mini-cover>span{font-size:25px;line-height:1.05}.mini-cover .landscape{height:125px;flex:none}.mini-cover small{font:5px 'DM Sans',sans-serif;letter-spacing:1.5px}.color .mini-cover{background:#bb593b;color:#fff1db;transform:rotate(6deg)}.color .mini-cover .landscape{height:100px}.quiet .mini-cover{background:#edede3;transform:rotate(-4deg)}.quiet .mini-cover .landscape{height:130px}.quiet .mini-cover>span{font-size:21px}.choose{position:absolute;bottom:15px;right:18px;font-size:10px;background:var(--paper);padding:9px 12px;opacity:0;transition:opacity .2s}.template-card:hover .choose,.template-card:focus-visible .choose{opacity:1}.template-label{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:17px}.template-label h3{font-size:14px;font-weight:500;margin:0}.template-label>span{font-size:7px;letter-spacing:1px}footer{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:40px 6%}footer p{font-size:12px}footer>span{font-size:9px;color:var(--muted)}.studio-bar{display:flex;align-items:center;justify-content:space-between;padding:13px 4%;border-bottom:1px solid var(--line);gap:15px}.studio-bar ol{display:flex;gap:28px;padding:0;list-style:none;margin:0}.studio-bar li button{border:0;background:none;font-size:11px;color:var(--muted);padding:10px 0}.studio-bar li[aria-current="step"] button{color:var(--ink);border-bottom:1px solid var(--ink)}.prototype-tag{font-size:8px;letter-spacing:1px;border:1px solid var(--line);padding:7px}.studio-layout{display:grid;grid-template-columns:390px 1fr;min-height:calc(100vh - 170px)}.controls{padding:40px 32px;display:flex;flex-direction:column;border-right:1px solid var(--line)}.controls h1{font-family:Georgia;font-size:32px;font-weight:400;margin:10px 0}.muted{color:var(--muted);font-size:12px;line-height:1.7}.upload-zone{display:flex;flex-direction:column;text-align:center;align-items:center;gap:12px;padding:26px 12px;border:1px dashed #8b9c8b;margin-top:20px;cursor:pointer;background:#eeeee5}.upload-zone:hover{background:#e6e9dd}.upload-symbol{font-size:25px}.upload-zone strong{font-size:13px;font-weight:500}.upload-zone>span:last-child{font-size:9px;color:var(--muted)}.privacy-note{font-size:10px;line-height:1.7;color:var(--muted)}.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:15px 0}.photo-item .thumbnail{width:100%;aspect-ratio:1;object-fit:cover;display:block}.photo-tools{display:flex;justify-content:space-between}.photo-tools button{border:0;background:transparent;font-size:11px;padding:7px;min-height:30px}.photo-tools button:disabled{opacity:.3}.photo-tools button:last-child{color:#8d4e40}.field{display:flex;flex-direction:column;gap:9px;font-size:11px;margin:23px 0}.field input,.field select{width:100%;border:1px solid #cbd2c4;border-radius:0;padding:13px;background:#fbfaf6;color:var(--ink)}.palette{border:0;padding:0;margin:24px 0}.palette legend{font-size:11px;margin-bottom:13px}.palette button{height:30px;width:30px;border-radius:50%;border:3px solid var(--paper);outline:1px solid transparent;background:var(--swatch);margin-right:10px}.palette button[aria-pressed="true"]{outline-color:var(--ink)}.step-actions{display:flex;justify-content:space-between;align-items:center;padding-top:26px;margin-top:auto;gap:15px}.preview-area{padding:28px 40px 35px;background:#e3e7df;display:flex;align-items:center;flex-direction:column;min-width:0}.preview-top{display:flex;justify-content:space-between;width:100%;font-size:8px;letter-spacing:1.5px;color:#5b6c5d}.book-preview{margin:auto 0;display:flex;align-items:center;justify-content:center;min-height:430px;width:100%;padding:50px 0}.cover{width:310px;aspect-ratio:1;background:var(--cover-bg,#eee8db);padding:28px;color:var(--cover-ink,var(--ink));box-shadow:10px 15px 20px #2d43352e,inset 5px 0 4px #0000000b;display:flex;flex-direction:column;gap:16px;transform:rotate(-3deg)}.cover .cover-heading{font:28px/1.1 Georgia,serif;overflow-wrap:anywhere;max-height:94px;overflow:hidden}.cover .cover-image{width:100%;flex:1;min-height:80px;max-height:175px;object-fit:cover}.cover .cover-caption{font-size:7px;letter-spacing:2px;overflow-wrap:anywhere}.cover.color .cover-heading{order:2}.cover.color .cover-caption{order:0}.cover.color .cover-image{order:1}.cover.quiet{padding:32px}.spread{width:min(100%,650px);display:grid;grid-template-columns:1fr 1fr;box-shadow:8px 15px 24px #2d433526}.page{aspect-ratio:1;background:#faf7ef;padding:8%;display:flex;align-items:center;justify-content:center;position:relative;min-width:0}.page+.page{box-shadow:inset 8px 0 13px -10px #0009}.page img,.page>.landscape{width:100%;height:90%;object-fit:contain}.page .page-number{position:absolute;bottom:5%;font-size:7px;color:#8a8e81}.empty-page{font:italic 16px Georgia;color:#9aa08e;text-align:center}.preview-navigation{display:flex;align-items:center;gap:28px;margin-top:20px}.preview-navigation button{border:1px solid #b8c4b5;border-radius:50%;background:none;width:38px;height:38px}.preview-navigation button:disabled{opacity:.3;cursor:default}.preview-navigation span{font-size:10px;min-width:100px;text-align:center}.preview-note{font-size:9px;color:var(--muted);margin-top:18px}.notice{padding:13px;background:#fff9e7;font-size:11px;line-height:1.6;margin-top:14px}.notice.good{background:#dce8d8}.review-summary{border-block:1px solid var(--line);padding:20px 0;margin:20px 0}.review-summary>strong{font:20px Georgia;font-weight:400}.review-summary dl{font-size:11px}.review-summary dl div{display:flex;justify-content:space-between;margin:13px 0}.review-summary dd{margin:0}.secondary-button{background:transparent;border:1px solid #9dab99;padding:12px 16px;font-size:11px;margin-top:13px}
@media(min-width:1500px){.hero-copy{padding-left:max(12%,calc((100vw - 1300px)/2))}.hero-art{min-height:700px}}@media(max-width:1000px){.site-header{height:80px}.hero-copy{padding:65px 9%}.hero{min-height:580px}.hero-book{width:245px;height:325px;padding:20px}.book-photo{height:150px}.hero-book-title{font-size:26px}.template-stage{height:290px}.mini-cover{width:160px;height:215px}.mini-cover .landscape{height:105px}.template-label{display:block}.template-label>span{display:block;margin-top:8px}.studio-layout{grid-template-columns:340px 1fr}.controls{padding:28px 22px}.preview-area{padding:25px 20px}.cover{width:260px}.book-preview{min-height:380px}.studio-bar ol{gap:13px}}@media(max-width:700px){.site-header{padding:0 6%;height:74px}.wordmark{font-size:35px}.site-header nav{display:none}.hero{display:flex;flex-direction:column}.hero-copy{padding:44px 7% 42px}.hero h1{font-size:49px;margin:20px 0}.intro{font-size:13px;max-width:350px}.hero .button{margin-top:17px}.hero-art{min-height:440px}.hero-book{width:245px;height:315px}.book-photo{height:145px}.hero-book-title{font-size:25px;margin-top:15px}.art-note{top:24px;right:22px;font-size:13px}.tiny-stamp{width:65px;height:65px;font-size:6px;bottom:30px;right:22px}.loose-photo{transform:rotate(13deg) translate(105px,-45px);width:150px;height:180px!important}.section{padding:50px 7%}.section-heading{display:block;margin-bottom:26px}.section-heading p:last-child{font-size:12px;margin-top:20px}h2{font-size:36px}.template-grid{grid-template-columns:1fr;gap:28px}.template-stage{height:320px}.mini-cover{width:190px;height:245px}.mini-cover .landscape{height:125px}.choose{opacity:1}.template-label{display:flex}.template-label>span{margin:0}footer{flex-wrap:wrap;padding:28px 7%}footer>span{width:100%}.studio-bar{padding:9px 5%;flex-wrap:wrap}.studio-bar>.text-button{font-size:10px}.studio-bar ol{order:3;width:100%;justify-content:space-around;gap:10px}.prototype-tag{font-size:7px}.studio-layout{display:flex;flex-direction:column}.controls{padding:24px 6%;border-right:0}.controls h1{font-size:30px}.preview-area{padding:25px 6%;min-height:450px}.book-preview{min-height:310px;padding:30px 0}.cover{width:260px}.photo-grid{grid-template-columns:repeat(4,1fr)}.upload-zone{padding:20px}.step-actions{margin-top:12px}.spread .empty-page{font-size:11px}.controls .muted{margin-bottom:0}.preview-navigation{margin-top:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}} 

/* Full-screen photo field followed by the delayed, left-aligned headline. */
.hero{position:relative;display:block;height:calc(100svh - 102px);min-height:600px;isolation:isolate}
.hero-copy{position:absolute;z-index:2;left:50%;top:50%;width:min(90%,700px);padding:0;transform:translate(-50%,-50%);text-align:center;opacity:1;transition:opacity .8s ease,filter .8s ease}
.hero h1{font-size:clamp(40px,4.4vw,64px);line-height:1.08;margin:12px 0 18px}
.hero-copy .eyebrow{margin:0;font-size:9px}
.hero .button{margin-top:0}
.intro-pending .hero-copy{opacity:0;filter:blur(5px);pointer-events:none}
.memory-gallery{position:absolute;inset:0;padding:22px 6% 42px;min-width:0}
.memory-grid{height:100%;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:1fr 1fr;column-gap:6vw;row-gap:260px;align-items:center}
.memory-frame{margin:0;display:flex;align-items:center;justify-content:center;min-width:0;height:100%}
.memory-frame img{display:block;width:100%;max-width:180px;height:clamp(85px,16svh,160px);object-fit:cover}
.memory-frame:nth-child(3n+1) img{width:74%;max-width:130px;height:clamp(100px,20svh,195px)}
.memory-frame:nth-child(3n+2) img{height:clamp(70px,13svh,125px)}
.memory-caption{position:absolute;bottom:8px;left:6%;right:6%;display:flex;align-items:center;justify-content:space-between;gap:15px}
.memory-caption>span{font-size:8px;letter-spacing:1.8px}
.memory-caption button{font-size:10px}
.hero-story{text-align:center;padding:40px 7%;border-top:1px solid var(--line)}
.hero-story .intro{max-width:550px;margin:0 auto}
.hero-story .fine-print{margin-bottom:0}
.photo-intro{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:var(--paper);color:var(--ink);overflow:hidden}
.photo-intro::backdrop{background:var(--paper)}
.photo-intro.is-settling::backdrop{background:transparent}
.intro-photo{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.intro-pending{scrollbar-gutter:stable}
.intro-flash{position:absolute;inset:0;z-index:1;pointer-events:none;background:#fff}
@media(prefers-reduced-motion:reduce){.intro-flash{display:none}}
.photo-intro .intro-skip{
  position:absolute;right:max(16px,2.5vw,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:2;
  min-height:44px;padding:10px 16px;border:1px solid #ffffff4d;border-radius:100px;background:#111210c9;color:#fffaf0;font-size:var(--type-control);
}
.photo-intro .intro-skip:hover,.photo-intro .intro-skip:focus-visible{background:#111210}
body.intro-playing{overflow:hidden}
@media(max-width:1000px){.hero{height:calc(100svh - 80px);min-height:570px}.memory-grid{column-gap:5vw;row-gap:245px}}
@media(max-width:700px){.hero{height:calc(100svh - 74px);min-height:590px}.hero h1{font-size:43px;letter-spacing:-1.5px}.hero-copy .eyebrow{font-size:7px;letter-spacing:1.4px}.hero .button{font-size:11px;padding:14px 18px}.memory-gallery{padding:20px 5% 46px}.memory-grid{column-gap:5vw;row-gap:235px}.memory-frame img{height:85px}.memory-frame:nth-child(3n+1) img{height:110px;width:90%}.memory-frame:nth-child(3n+2) img{height:65px}.memory-caption>span{font-size:6px;letter-spacing:1px}.intro-skip{bottom:22px}.hero-story{padding:30px 7%}}
@media(prefers-reduced-motion:reduce){.hero-copy{transition:none}.intro-pending .hero-copy{opacity:1;filter:none;pointer-events:auto}}

/* A vertical scroll becomes a horizontal, three-chapter photo essay. */
.sample-photo{width:100%;object-fit:cover;display:block}

/* Keep the headline below the entire photo grid, in reading and visual order. */
.hero{display:flex;flex-direction:column;height:auto;min-height:0}
.memory-gallery{position:relative;inset:auto;width:100%;height:calc(100svh - 102px);min-height:520px;flex:none}
.memory-grid{row-gap:clamp(36px,8svh,100px)}
.hero-copy{position:relative;left:auto;top:auto;width:100%;padding:42px 6% 56px;transform:none;text-align:left}
.hero h1{margin:16px 0 24px}
@media(max-width:1000px){.memory-gallery{height:calc(100svh - 80px)}}
@media(max-width:700px){.memory-gallery{height:calc(100svh - 74px);min-height:420px}.memory-grid{row-gap:36px}.hero-copy{padding:32px 7% 42px}}

/* Share the first screen between the photo field and the headline. */
.hero{height:calc(100svh - 102px);min-height:0}
.memory-gallery{flex:1;min-height:0;height:auto;padding:18px 6% 34px}
.memory-grid{row-gap:18px}
.memory-frame img{height:clamp(65px,11svh,110px)}
.memory-frame:nth-child(3n+1) img{height:clamp(85px,15svh,145px)}
.memory-frame:nth-child(3n+2) img{height:clamp(55px,9svh,90px)}
.memory-caption{bottom:0}
.hero-copy{flex:none;padding:22px 6% 28px}
.hero h1{font-size:clamp(36px,4vw,58px);margin:10px 0 16px;line-height:1.05}
@media(max-width:1000px){.hero{height:calc(100svh - 80px);min-height:0}}
@media(max-width:700px){.hero{height:calc(100svh - 74px);min-height:0}.memory-gallery{height:auto;min-height:0;padding:12px 5% 32px}.memory-grid{row-gap:12px}.memory-frame img{height:9svh}.memory-frame:nth-child(3n+1) img{height:12svh}.memory-frame:nth-child(3n+2) img{height:8svh}.hero-copy{padding:18px 7% 24px}.hero h1{font-size:clamp(32px,5.8svh,43px);margin:8px 0 14px}.hero-copy .eyebrow{font-size:7px}}
@media(max-height:700px) and (min-width:701px){.hero{min-height:0}.hero-copy{padding-top:14px;padding-bottom:20px}.hero h1{font-size:38px}.memory-frame img{height:9svh}.memory-frame:nth-child(3n+1) img{height:12svh}.memory-frame:nth-child(3n+2) img{height:8svh}}

/* Preserve the complete photographs within the available first-screen space. */
.memory-frame img,
.memory-frame:nth-child(3n+1) img,
.memory-frame:nth-child(3n+2) img{width:auto;max-width:100%;height:auto;max-height:clamp(80px,15svh,150px);object-fit:contain}
@media(max-width:700px){.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:17svh;max-width:100%}}
@media(max-height:700px) and (min-width:701px){.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:13svh}}

/* A compact contact sheet: twelve complete portraits in three even rows. */
.memory-gallery{display:flex;flex-direction:column;justify-content:center;padding-top:14px;padding-bottom:34px}
.memory-grid{flex:none;width:min(100%,560px);height:auto;margin:0 auto;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,auto);gap:14px 20px;align-content:center}
.memory-frame{height:auto}
.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:clamp(60px,13svh,125px);max-width:100%;width:auto;height:auto}
@media(max-width:700px){.memory-grid{width:min(100%,420px);gap:10px 12px}.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:13svh}}
@media(max-height:700px) and (min-width:701px){.memory-grid{gap:8px 16px;width:min(100%,480px)}.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:11svh}}

/* Give the portraits more of the opening screen while retaining three rows. */
.memory-gallery{padding-top:10px;padding-bottom:30px}
.memory-grid{width:min(100%,1060px);gap:10px 36px}
.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:clamp(80px,16svh,160px)}
.hero-copy{padding-top:16px;padding-bottom:22px}
.hero h1{font-size:clamp(34px,3.7vw,54px);margin:8px 0 14px}
@media(max-width:1000px){.memory-grid{width:100%;column-gap:24px}}
@media(max-width:700px){.memory-gallery{padding-top:8px;padding-bottom:30px}.memory-grid{width:100%;gap:8px 16px}.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:15svh}.hero-copy{padding-top:14px;padding-bottom:18px}.hero h1{font-size:clamp(30px,5.4svh,40px)}}
@media(max-height:700px) and (min-width:701px){.memory-grid{width:min(100%,960px);gap:8px 24px}.memory-frame img,.memory-frame:nth-child(3n+1) img,.memory-frame:nth-child(3n+2) img{max-height:14svh}.hero-copy{padding-top:10px;padding-bottom:16px}.hero h1{font-size:34px}}

/* Eighteen portraits, six per row, within the shared opening screen. */
.memory-grid{grid-template-columns:repeat(6,minmax(0,1fr));width:min(100%,1180px);column-gap:24px}
@media(max-width:1000px){.memory-grid{width:100%;column-gap:16px}}
@media(max-width:700px){.memory-grid{grid-template-columns:repeat(6,minmax(0,1fr));column-gap:8px}}
@media(max-height:700px) and (min-width:701px){.memory-grid{width:min(100%,1100px);column-gap:20px}}

/* Floating smoked-glass navigation, above the photographs and story canvas. */
body{padding-top:102px}
.site-header{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:50;width:min(740px,calc(100% - 32px));height:64px;padding:8px 10px 8px 22px;gap:26px;border:1px solid #ffffff3d;border-radius:20px;background:linear-gradient(120deg,#24382fbd,#24382f96);color:#faf9f4;box-shadow:0 8px 28px #10251b17,inset 0 1px 0 #ffffff24;-webkit-backdrop-filter:blur(22px) saturate(145%);backdrop-filter:blur(22px) saturate(145%)}
.site-header .wordmark{font-size:33px;letter-spacing:-2px;gap:9px;flex:none}
.site-header .wordmark span{font-size:23px}
.site-header nav{display:flex;gap:22px;font-size:12px;align-items:center}
.site-header nav a{opacity:.86;transition:opacity .2s,background .2s;padding:9px 5px;border-radius:7px}
.site-header nav a:hover{opacity:1;background:#ffffff12}
.site-header>.text-button{flex:none;min-height:46px;padding:13px 17px;background:#f8f7f0;color:var(--ink);border:1px solid #ffffffa6;border-radius:12px;font-size:11px;transition:background .2s,box-shadow .2s}
.site-header>.text-button:hover{background:#fff;box-shadow:0 3px 12px #00000012}
.site-header>.text-button span{margin-left:18px}
.site-header a:focus-visible,.site-header button:focus-visible{outline-color:#f1c69f;outline-offset:3px}
#templates,#how{scroll-margin-top:100px}
@supports not (backdrop-filter:blur(1px)){.site-header{background:#30483fec}}
@media(max-width:1000px){body{padding-top:80px}.site-header{top:10px;height:60px}}
@media(max-width:700px){body{padding-top:74px}.site-header{top:8px;width:calc(100% - 20px);height:58px;padding:6px 7px 6px 14px;gap:10px;border-radius:17px}.site-header .wordmark{font-size:28px;gap:6px}.site-header .wordmark span{font-size:19px}.site-header nav{display:flex;flex-direction:column;gap:0;align-items:flex-start;font-size:9px}.site-header nav a{padding:4px}.site-header>.text-button{min-height:42px;padding:11px 12px;font-size:10px;border-radius:11px}.site-header>.text-button span{margin-left:8px}}

/* Charcoal paper, fine photographic grain, and warm white typography. */
:root{--paper:#111210;--ink:#eeeae1;--line:#ffffff24;--muted:#b2b4aa;--accent:#d9b997;background:#111210;color-scheme:dark}
body{background-color:var(--paper);background-image:url('assets/grain.png')}
.hero,.hero-story,.templates-section,footer{background:transparent}
.intro,.section-heading p:last-child{color:#c2c4ba}
.button{background:#e8e4da;border-color:#e8e4da;color:#171b17}
.button:hover{background:#fffaf0;border-color:#fffaf0}
.site-header{background:linear-gradient(120deg,#252823b8,#191c19a3);border-color:#ffffff26;box-shadow:0 8px 32px #0005,inset 0 1px 0 #ffffff17;color:#eeeae1}
.site-header>.text-button{color:#18201a}
.template-stage{background:#20221f}.template-stage.color{background:#27241f}.template-stage.quiet{background:#1d2420}
.mini-cover{color:#213c32}.color .mini-cover{color:#fff1db}
.choose{background:#262b25;color:#eeeae1}


.studio-bar,.controls{background-color:#141612;background-image:url('assets/grain.png')}
.preview-area{background-color:#232820;background-image:url('assets/grain.png')}
.preview-top{color:#c1c9b9}
.upload-zone{background:#22281f;border-color:#74816c}.upload-zone:hover{background:#2b3427}
.field input,.field select{background:#21261e;border-color:#58624e;color:var(--ink)}
.palette button{border-color:#141612}
.notice{background:#342e20;color:#eee4ce}.notice.good{background:#263b27;color:#e2eedc}
.photo-tools button:last-child{color:#e2a591}
.preview-navigation button,.secondary-button{border-color:#819076}
.page{color:#213c32}.empty-page{color:#a1a98f}
@supports not (backdrop-filter:blur(1px)){.site-header{background:#242823f5}}

/* A wider page rhythm with less space reserved for outer margins. */
.memory-gallery{padding-left:2.5%;padding-right:2.5%}
.memory-grid{width:100%;column-gap:20px}
.memory-caption{left:2.5%;right:2.5%}
.hero-copy{padding-left:2.5%;padding-right:2.5%}
.hero-story{padding:28px 2.5%}
.hero-story .intro{max-width:680px}
.section{padding:56px 2.5%}
.section-heading{margin-bottom:26px}
.template-grid{gap:18px}

footer{padding:28px 2.5%}
.studio-bar{padding-left:2.5%;padding-right:2.5%}
.controls{padding:28px 22px}
.preview-area{padding:24px}
@media(max-width:1000px){.memory-grid{width:100%;column-gap:16px}}
@media(max-width:700px){.memory-gallery{padding-left:4%;padding-right:4%}.memory-grid{width:100%;column-gap:8px}.memory-caption{left:4%;right:4%}.hero-copy{padding-left:4%;padding-right:4%}.hero-story{padding:24px 4%}.section{padding:38px 4%}.template-grid{gap:22px}footer{padding:24px 4%}.controls{padding:22px 4%}.preview-area{padding:22px 4%}}
@media(max-height:700px) and (min-width:701px){.memory-grid{width:100%;column-gap:20px}}

/* Balance the opening headline with its action on the opposite edge. */
.hero-copy{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:24px;align-items:end}
.hero-copy>.eyebrow,.hero-copy>h1{grid-column:1}
.hero-copy>.button{grid-column:2;grid-row:1 / 3;align-self:end;margin:0 0 14px}
@media(max-width:700px){.hero-copy{column-gap:12px}.hero-copy>.button{grid-column:1 / -1;grid-row:auto;justify-self:end;margin:0}.hero-copy>h1{margin-bottom:14px}}

/* Size the three independent rows to the gallery without moving the headline. */
.memory-gallery{container-type:inline-size;padding-bottom:48px}
.memory-grid{
  --photo-gap:10px;
  /* The widest row combines four 11:15 portraits and two 15:11 landscapes. */
  --photo-row-limit:min(var(--photo-height-cap, 190px), 20svh, calc((100cqw - 5 * var(--photo-gap)) / (4 * 11 / 15 + 2 * 15 / 11)));
  flex:1;
  min-height:0;
  width:100%;
  max-height:calc(3 * var(--photo-row-limit) + 2 * var(--photo-gap));
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:repeat(3,minmax(0,1fr));
  gap:var(--photo-gap);
  align-items:stretch;
  justify-content:normal;
}
.memory-row{display:flex;justify-content:center;gap:var(--photo-gap);min-height:0}
.memory-frame{height:100%;aspect-ratio:11 / 15;flex:none}
.memory-frame.is-landscape{aspect-ratio:15 / 11}
.memory-frame:nth-child(n) img{width:100%;height:100%;max-width:none;max-height:none;object-fit:cover}
@media(max-width:700px), (max-width:950px) and (orientation:landscape) and (max-height:540px){
  .memory-grid{flex:none;height:calc(3 * var(--photo-row-limit) + 2 * var(--photo-gap))}
}
@media(max-width:950px) and (orientation:landscape) and (max-height:540px){
  .memory-grid{--photo-height-cap:clamp(40px,12svh,50px)}
}
.site-header .wordmark{width:44px;min-height:44px;justify-content:center;letter-spacing:0;gap:0}
.site-header .wordmark span{font-size:30px;line-height:1}
@media(max-width:700px){.site-header .wordmark{width:38px;min-height:42px}.site-header .wordmark span{font-size:28px}}

/* Let the floating navigation fit its contents instead of spanning a wide bar. */
.site-header{width:max-content;max-width:calc(100% - 24px);justify-content:flex-start;gap:22px;padding:7px 8px 7px 12px;height:60px;border-radius:18px}
.site-header nav{gap:16px}
.site-header .wordmark{width:36px}
.site-header>.text-button{min-height:44px;padding:12px 15px}
@media(max-width:700px){.site-header{gap:12px;height:56px;padding:6px 7px 6px 10px;border-radius:16px}.site-header .wordmark{width:30px}.site-header nav{gap:0}.site-header>.text-button{min-height:42px;padding:11px 12px}}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.language-picker{display:flex;align-items:center;border-left:1px solid #ffffff24;padding-left:12px}
.language-picker select{font:inherit;font-size:10px;max-width:105px;background:transparent;color:#eeeae1;border:0;padding:8px 3px;cursor:pointer;color-scheme:dark}
.language-picker option{background:#20231e;color:#eeeae1}
.site-header{gap:16px}
@media(max-width:700px){.site-header{gap:7px;padding-left:8px}.language-picker{padding-left:5px}.language-picker select{font-size:9px;max-width:76px;padding:8px 0}.site-header nav{font-size:8px}.site-header>.text-button{padding:10px 8px;font-size:9px}.site-header>.text-button span{margin-left:4px}.site-header .wordmark{width:25px}}
@media(max-width:370px){.site-header nav{max-width:67px}.site-header{gap:5px}.site-header>.text-button{max-width:99px}.site-header .wordmark span{font-size:23px}}

/* Compact country-code control with the reference's rounded vertical dropdown. */
.language-picker{position:relative;padding-left:10px}
.language-trigger{display:flex;align-items:center;justify-content:center;gap:8px;min-width:52px;min-height:40px;padding:8px 7px;background:transparent;color:#eeeae1;border:0;border-radius:10px;font-size:11px;letter-spacing:.5px}
.language-trigger:hover,.language-trigger[aria-expanded="true"]{background:#ffffff12}
.language-trigger>span:last-child{font-size:12px;opacity:.65}
.language-menu{position:absolute;top:calc(100% + 16px);right:0;min-width:90px;padding:9px 7px;border:1px solid #ffffff26;border-radius:18px;background:#656862ed;box-shadow:0 12px 30px #0004;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;flex-direction:column;gap:2px}
.language-menu button{border:0;background:transparent;color:#fffaf0;text-align:left;font-size:13px;padding:12px 16px;border-radius:11px;min-height:42px}
.language-menu button:hover,.language-menu button:focus-visible{background:#ffffff20}
.language-menu button[aria-pressed="true"]{background:#ffffff15}
@media(max-width:700px){.language-picker{padding-left:4px}.language-trigger{min-width:40px;gap:4px;font-size:10px;padding:7px 3px}.language-menu{min-width:80px;top:calc(100% + 14px)}}
.memory-caption{gap:16px;align-items:center}
.photo-credit{margin-left:auto;font-size:8px;color:var(--muted);white-space:nowrap}
.photo-credit:hover{color:var(--ink)}
@media(max-width:700px){.memory-caption{gap:8px}.photo-credit{font-size:6px}.memory-caption>span{max-width:125px;line-height:1.5}}

/* Sample testimonials: quiet cards, staggered heights, explicit preview labels. */
.testimonials-section{padding-top:68px;padding-bottom:72px;border-block:1px solid var(--line)}
.testimonials-heading{text-align:center;max-width:650px;margin:0 auto 42px}
.testimonial-stars{font-size:16px;letter-spacing:5px;color:#999d90;line-height:1.4}
.testimonials-heading>.eyebrow{margin:20px 0 8px;color:var(--muted)}
.testimonials-heading h2{font-size:clamp(36px,4vw,56px);line-height:1.12;margin:12px 0 18px}
.testimonial-disclosure{font-size:11px;line-height:1.7;color:var(--muted);max-width:430px;margin:0 auto}
.testimonials-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;align-items:start}
.testimonials-column{display:grid;gap:18px}
.testimonial-card{margin:0;padding:28px;background:#181b17cf;border:1px solid #ffffff13;border-radius:18px}
.testimonial-card h3{font-size:16px;font-weight:500;line-height:1.45;margin:0 0 15px}
.testimonial-card .testimonial-stars{font-size:12px;letter-spacing:4px;color:#858b7d}
.testimonial-card blockquote{margin:20px 0 24px;color:#c3c6bb;font-size:14px;line-height:1.8}
.testimonial-card blockquote p{margin:0}
.testimonial-card figcaption{font-size:10px;line-height:1.6;color:#939d89;border-top:1px solid #ffffff10;padding-top:14px}
@media(max-width:1000px){.testimonial-card{padding:22px}.testimonial-card h3{font-size:15px}.testimonial-card blockquote{font-size:13px}}
@media(max-width:700px){.testimonials-section{padding-top:42px;padding-bottom:42px}.testimonials-heading{margin-bottom:28px}.testimonials-grid{grid-template-columns:1fr;gap:14px}.testimonials-column{gap:14px}.testimonial-card{padding:24px}.testimonials-heading h2{font-size:38px}.testimonial-disclosure{font-size:10px}}
#testimonials{scroll-margin-top:90px}

/* Yearly-wrap campaign: the existing dark visual system, now focused on a year. */
.campaign-description{font-size:12px;line-height:1.8;color:var(--muted);margin:12px 0 0;max-width:370px}
.campaign-spec{font-size:11px;line-height:1.7;color:var(--muted);margin:28px 0 0;padding-top:20px;border-top:1px solid var(--line)}
.campaign-card .mini-cover>span{font-size:23px}
.timeline-disclosure{margin:0;padding:14px 2.5%;font-size:10px;line-height:1.6;color:var(--muted);border-top:1px solid var(--line)}
.faq-section{display:grid;grid-template-columns:1fr 1.2fr;gap:60px;border-top:1px solid var(--line)}
.faq-list details{border-bottom:1px solid var(--line);padding:18px 0}
.faq-list summary{cursor:pointer;font-size:14px;line-height:1.6;padding-right:18px}
.faq-list details p{font-size:12px;line-height:1.9;color:var(--muted);max-width:650px}
.campaign-fields .field{margin:16px 0}.date-range{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.date-range input{min-width:0;font-size:11px;padding:11px 7px}.date-range .field{min-width:0}
.curation-controls{border-block:1px solid var(--line);padding:20px 0;margin:22px 0}
.undated-choice{display:flex;align-items:center;gap:9px;font-size:11px;line-height:1.6}
.undated-choice input,.candidate-choice input{accent-color:#c5cbb8}
#curation-feedback,#photo-feedback{font-size:11px;line-height:1.7;margin-top:12px}
.library-details{border-bottom:1px solid var(--line);padding-bottom:16px;margin-bottom:22px}
.library-details summary{font-size:12px;cursor:pointer}
.candidate-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.candidate-card{min-width:0;padding:8px;border:1px solid var(--line);background:#1b2018}
.candidate-card img{width:100%;height:100px;object-fit:cover}
.candidate-choice{display:flex;align-items:start;gap:5px;overflow-wrap:anywhere;font-size:8px;line-height:1.5;margin:8px 0}
.candidate-choice input{margin:0;flex:none}
.candidate-date{display:flex;flex-direction:column;gap:5px;font-size:8px;line-height:1.5}
.candidate-date input{width:100%;min-width:0;background:#161a13;color:var(--ink);border:1px solid var(--line);padding:5px 2px;font-size:9px}
.candidate-card>.text-button{font-size:9px;padding:8px 0}
.selected-title{font-size:11px;font-weight:500;margin:20px 0 12px}
.selection-reason{display:block;font-size:8px;line-height:1.5;color:var(--muted);margin:0 0 8px}
@media(max-width:700px){.faq-section{grid-template-columns:1fr;gap:20px}.timeline-disclosure{padding:12px 4%}.campaign-description{font-size:12px;max-width:none}.campaign-spec{font-size:10px}.candidate-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.candidate-card img{height:130px}.candidate-choice,.candidate-date{font-size:10px}.candidate-date input{font-size:11px}.candidate-card>.text-button{font-size:10px}}
.campaign-card[data-story="family"] .mini-cover>span{font-size:20px}
.campaign-card[data-story="family"] .mini-cover .landscape{height:110px}
.page-month{position:absolute;top:3.2%;left:6.4%;font-size:6.4px;color:#657269;text-transform:capitalize}
@media(min-width:701px){.preview-area{position:sticky;top:88px;align-self:start;height:calc(100svh - 100px);min-height:480px}.book-preview{min-height:0;flex:1;margin:0}.studio-layout{align-items:start}}

/* Physical format choices share the existing studio styling. */
.book-options{border:1px solid #ffffff24;border-radius:14px;padding:20px;margin:0 0 28px;background:#ffffff04}
.book-options legend{padding:0 8px;font-size:15px}.spec-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 14px}.spec-fields .field:first-child{grid-column:1/-1}
#book-preview .cover{aspect-ratio:var(--book-ratio,1);height:auto;max-height:56svh;width:auto;max-width:90%;min-height:0}
#book-preview .page{aspect-ratio:var(--book-ratio,1)}
#book-preview.portrait-book .spread{max-width:560px}
#book-preview.softcover-book .cover{border-radius:1px;box-shadow:3px 4px 0 #aaa39a,12px 18px 35px #0005}
.spec-fields .spec-variant{grid-column:1/-1}.gelato-price{font-size:28px;margin:20px 0 10px}.gelato-price:empty{display:none}.gelato-price small{display:block;font-size:11px;color:var(--muted);margin-top:7px}.book-options select:disabled{opacity:.45;cursor:wait}

/* Keep browsing controls reachable independently of the editor's scroll height. */
#studio{--studio-sidebar:390px;padding-bottom:100px}
.preview-area{padding-bottom:105px}
.preview-navigation{position:fixed;left:calc(var(--studio-sidebar) + (100vw - var(--studio-sidebar))/2);bottom:calc(16px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:90;margin:0;padding:8px 12px;gap:20px;width:max-content;max-width:calc(100vw - var(--studio-sidebar) - 24px);border:1px solid #ffffff26;border-radius:999px;background:#191e18e8;box-shadow:0 8px 30px #0005;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)}
.preview-navigation button{flex-shrink:0;width:44px;height:44px;color:#f5f3ed;touch-action:manipulation}
.preview-navigation button:hover:not(:disabled){background:#ffffff16}
.preview-navigation span{min-width:112px;font-size:11px;color:#f5f3ed}
@media(min-width:701px){.preview-area{height:calc(100dvh - 88px);min-height:0}.book-preview{padding:22px 0;min-height:0}.preview-note{max-width:440px;text-align:center;line-height:1.6;margin:12px 0 0}.spread{width:min(100%,calc((100dvh - 300px)*2*var(--page-ratio,1)))}}
@media(min-width:701px) and (max-width:1000px){#studio{--studio-sidebar:340px}}
@media(max-width:700px){
 #studio{--studio-sidebar:0px;padding-bottom:100px}
 .preview-navigation{left:50%;max-width:calc(100vw - 24px);gap:16px}
 .preview-area{order:-1;position:sticky;top:88px;z-index:15;width:100%;height:clamp(240px,42dvh,360px);min-height:0;padding:12px 4% 10px;border-bottom:1px solid #ffffff20;box-shadow:0 12px 28px #0003}
 .preview-area .book-preview{flex:1;min-height:0;padding:12px 0;margin:0}
 #book-preview .cover{max-height:calc(42dvh - 88px);max-width:65%;padding:14px;gap:8px}
 #book-preview .cover .cover-heading{font-size:18px;max-height:45px}
 #book-preview .cover .cover-image{min-height:30px;max-height:17dvh}
 #book-preview .cover .cover-caption{font-size:5px;letter-spacing:1px}
 #book-preview .spread{width:min(100%,calc(27dvh*2*var(--page-ratio,1)))}
 .preview-note{font-size:8px;line-height:1.4;margin:6px 0 0;text-align:center;max-width:100%}
 .controls{padding-bottom:30px}
}

/* Temporary, inaccessible sheet above the live preview during a page turn. */
.page-turn-stage{position:fixed;inset:0;z-index:60;pointer-events:none;perspective:1800px;perspective-origin:50% 50%;overflow:visible}
.turning-sheet,.turn-stationary{position:absolute;transform-style:preserve-3d;pointer-events:none}
.turning-sheet{will-change:transform;z-index:2}
.turn-face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#faf7ef;overflow:hidden;box-shadow:0 3px 16px #0003}
.turn-back{transform:rotateY(180deg)}
.turn-face>.page,.turn-stationary>.page,.turn-face>.cover{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0;transform:none;box-shadow:none;aspect-ratio:auto}
.turn-stationary>.page{box-shadow:inset 0 0 12px #00000008}
.turn-face>.cover{min-height:0}
.turn-shade{position:absolute;inset:0;background:linear-gradient(90deg,#0006,transparent 30%,#0002);opacity:0;pointer-events:none;transform:translateZ(1px);backface-visibility:hidden}
@media(prefers-reduced-motion:reduce){.page-turn-stage{display:none}}

/* Direct photo editing keeps page positions and personal text intact. */
.book-photo-edit{position:relative;border:0;padding:0;background:transparent;color:inherit;cursor:pointer;display:flex;align-items:center;justify-content:center;overflow:hidden;width:100%;height:90%;font:inherit}
.book-photo-edit .book-edit-image{width:100%;height:100%;object-fit:contain;display:block}
.cover .book-photo-edit{display:flex;min-height:60px;flex:1}
.cover .book-photo-edit .book-edit-image{object-fit:cover}
.photo-edit-hint{position:absolute;bottom:8px;right:8px;padding:7px 9px;border-radius:20px;background:#151914e8;color:#f5f3ed;font-size:10px;line-height:1.2;opacity:0;transition:opacity .18s}
.book-photo-edit:hover .photo-edit-hint,.book-photo-edit:focus-visible .photo-edit-hint{opacity:1}
.page .book-photo-edit .empty-page{padding:20px}
.photo-edit-choice{border:1px solid #ffffff20;background:#ffffff06;color:inherit;padding:8px;text-align:left;border-radius:8px;min-width:0}
.photo-edit-choice:hover:not(:disabled){border-color:#eee8db;background:#ffffff10}
.photo-edit-choice[aria-pressed=true]{border-color:#eee8db}
.photo-edit-choice:disabled{cursor:default;opacity:.45}
.photo-edit-choice[aria-pressed=true]:disabled{opacity:1}
.photo-choice-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;margin:8px 0}
.photo-edit-choice small{font-size:9px;line-height:1.5;display:block;color:#c1c8bc}
@media(hover:none){.photo-edit-hint{opacity:1;font-size:9px;padding:5px 7px}}

#book-preview .cover{width:min(310px,75%,calc(56dvh * var(--page-ratio,1)))}
#book-preview .cover .book-photo-edit{max-height:none;min-height:0}
@media(max-width:700px){#book-preview .cover{width:min(220px,65%,calc((42dvh - 88px) * var(--page-ratio,1)))}}

/* The actual book image is the crop canvas; framing is independent of viewport size. */
.book-photo-edit .book-edit-image{position:absolute;max-width:none;max-height:none;object-fit:fill;user-select:none;-webkit-user-drag:none;pointer-events:none}
.book-photo-edit.is-cropping{outline:2px solid #e7aa7c;outline-offset:4px;cursor:grab;touch-action:none}
.book-photo-edit.is-dragging{cursor:grabbing}.book-photo-edit.is-cropping .photo-edit-hint{display:none}
.crop-panel{position:fixed;left:calc(var(--studio-sidebar) + (100vw - var(--studio-sidebar))/2);bottom:calc(92px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:95;width:min(370px,calc(100vw - var(--studio-sidebar) - 28px));max-height:calc(100dvh - 180px);overflow:auto;padding:16px 20px;border:1px solid #ffffff30;border-radius:16px;background:#191e18f5;color:#f5f3ed;box-shadow:0 15px 50px #0006;backdrop-filter:blur(20px)}
.crop-heading,.crop-actions{display:flex;align-items:center;justify-content:space-between;gap:12px}.crop-heading strong{font-size:13px}.crop-heading .text-button,.crop-actions .text-button{font-size:10px;padding:5px 0}
.crop-help{font-size:10px;line-height:1.5;color:#c1c8bc;margin:6px 0 12px}.crop-modes{display:flex;gap:8px;margin-bottom:12px}.crop-modes button{flex:1;border:1px solid #ffffff30;background:none;color:inherit;border-radius:6px;padding:8px;font-size:10px}.crop-modes button[aria-pressed=true]{background:#eee8db;color:#213c32}
.crop-slider{display:grid;grid-template-columns:48px minmax(0,1fr) 38px;gap:8px;align-items:center;font-size:10px;margin:10px 0}.crop-slider input{width:100%;accent-color:#e7aa7c;min-width:0}.crop-slider input:disabled{opacity:.35}.crop-slider output{font-size:10px;text-align:right}.crop-actions .secondary-button{padding:8px 12px;margin:4px 0 0;font-size:10px}
@media(min-width:1001px){.crop-panel{left:auto;right:24px;transform:none;width:300px}}
@media(max-width:700px){.crop-panel{left:50%;width:min(370px,calc(100vw - 24px));padding:12px 16px;bottom:calc(86px + env(safe-area-inset-bottom,0px))}.crop-help{font-size:9px;margin-bottom:8px}.crop-slider{margin:7px 0}.crop-modes{margin-bottom:6px}}
@media(min-width:701px){.crop-panel{left:16px;right:auto;transform:none;width:calc(var(--studio-sidebar) - 32px);max-width:none;bottom:calc(16px + env(safe-area-inset-bottom,0px))}}

/* Reference-inspired editorial pages: whitespace, sequences and asymmetry. */
.page{container-type:inline-size;display:grid;grid-template-rows:minmax(0,1fr) auto;grid-template-columns:minmax(0,1fr);gap:4%;align-items:stretch;justify-content:stretch;padding:9% 8% 10%;overflow:hidden}
.page-photo-area{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);gap:5%;min-width:0;min-height:0;width:100%;height:100%;overflow:hidden}
.page-photo-area>.book-photo-edit{width:100%;height:100%;min-width:0;min-height:0;max-height:none}
.book-layout-pair .page-photo-area{grid-template-columns:repeat(2,minmax(0,1fr))}
.book-layout-grid .page-photo-area{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
.book-layout-editorial .page-photo-area{grid-template-columns:1.3fr 1fr;grid-template-rows:repeat(2,minmax(0,1fr))}
.book-layout-editorial .photo-frame-slot:first-child{grid-row:1/3}
.book-layout-offset .page-photo-area{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(6,minmax(0,1fr))}
.book-layout-offset .photo-frame-slot:first-child{grid-column:1/5;grid-row:1/4}
.book-layout-offset .photo-frame-slot:nth-child(2){grid-column:3/7;grid-row:4/7}
.book-layout-sequence .page-photo-area{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:1fr 1fr}
.book-layout-sequence .photo-frame-slot{grid-row:2}
.page-photo-area>.photo-frame-slot:only-child{grid-column:1/-1;grid-row:1/-1}
.book-layout-story{grid-template-columns:1.2fr 1fr;grid-template-rows:minmax(0,1fr);gap:7%;align-items:center}
.book-layout-story .page-photo-area{height:70%}
.book-page-caption{font-family:Georgia,serif;font-size:clamp(6px,2.4cqw,11px);line-height:1.55;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;color:#4b4b43;min-width:0;align-self:start}
/* An empty caption must not displace a single photo from the page centre.
   Keep its editable prompt in the bottom margin, outside the photo's grid. */
.page.book-layout-single:not(.has-caption){grid-template-rows:minmax(0,1fr);padding:12% 8%;gap:0}
.page.book-layout-single:not(.has-caption)>.book-page-caption{position:absolute;left:8%;right:8%;bottom:4%}
.book-layout-story .book-page-caption{align-self:center;font-size:clamp(6px,2.5cqw,12px)}
.page-layout-button{position:absolute;right:5%;top:3%;padding:2px 4px;font-size:clamp(6px,2cqw,9px);border:0;background:#faf7efcc;color:#616658;border-radius:3px;z-index:3;cursor:pointer}
.page-layout-button:hover,.page-layout-button:focus-visible{background:#e6e5d9;color:#213c32}
.page .page-month{max-width:43%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.page-composer{position:fixed;z-index:95;left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));width:calc(var(--studio-sidebar) - 32px);max-height:calc(100dvh - 150px);overflow:auto;padding:16px 18px;border:1px solid #ffffff30;border-radius:16px;background:#191e18f5;box-shadow:0 15px 50px #0006;color:#f5f3ed;backdrop-filter:blur(20px)}
.page-composer .field{margin:12px 0}.page-composer .field select,.page-composer textarea{background:#ffffff08;color:inherit;border:1px solid #ffffff30;border-radius:5px;padding:8px;font:inherit;width:100%;resize:vertical}
.page-composer textarea{min-height:75px;line-height:1.5;font-size:12px}
.page-composer .privacy-note{font-size:9px;margin:8px 0 0}.caption-count{text-align:right;font-size:9px;color:#bec6b8;margin:0}
.page-layout-choices{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.layout-choice{display:flex;flex-direction:column;gap:5px;align-items:center;border:1px solid #ffffff20;border-radius:6px;background:none;color:inherit;font-size:8px;line-height:1.3;padding:6px 3px}
.layout-choice[aria-pressed=true]{border-color:#e7aa7c;background:#ffffff0d}.layout-mini{width:32px;height:36px;background:#f5f2e9;padding:5px;display:grid;gap:2px;grid-template-columns:1fr;grid-template-rows:1fr}
.layout-mini i{display:block;background:#111111;min-width:0;min-height:0}.mini-pair{grid-template-columns:1fr 1fr}.mini-grid{grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr}.mini-editorial{grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr}.mini-editorial i:first-child{grid-row:1/3}.mini-sequence{grid-template-columns:repeat(3,1fr);padding-top:18px}.mini-offset{grid-template-columns:1fr 1fr 1fr;grid-template-rows:1fr 1fr}.mini-offset i:first-child{grid-column:1/3}.mini-offset i:last-child{grid-column:2/4}.mini-story{grid-template-columns:1.2fr 1fr}.mini-story:after{content:'';background:repeating-linear-gradient(#9b9e92 0 1px,transparent 1px 4px);height:70%;align-self:center}
@media(max-width:700px){.page-composer{left:50%;transform:translateX(-50%);width:min(370px,calc(100vw - 24px));bottom:calc(86px + env(safe-area-inset-bottom,0px));padding:12px 16px;max-height:calc(100dvh - 180px)}.page-composer textarea{min-height:60px}.page-composer .field{margin:8px 0}}
.book-layout-sequence.has-caption{grid-template-rows:.45fr .55fr}
.book-layout-sequence.has-caption .page-photo-area{grid-row:2;grid-template-rows:minmax(0,1fr)}
.book-layout-sequence.has-caption .photo-frame-slot{grid-row:1}
.book-layout-sequence.has-caption .book-page-caption{grid-row:1;width:65%;justify-self:end;align-self:start}
.turn-face .page-layout-button,.turn-stationary .page-layout-button{visibility:hidden}
.page-layout-button{min-height:24px;font-size:clamp(7px,2.1cqw,9px);top:2%;padding:3px 5px}
@media(max-width:700px){.page{padding-top:15%}.page-layout-button{min-height:28px;font-size:7px;right:3%;top:1%}}

/* Resize within layout cells to preserve gutters and prevent overlapping frames. */
.photo-frame-slot{position:relative;display:grid;place-items:center;width:100%;height:100%;min-width:0;min-height:0;overflow:visible}
.page-photo-area>.photo-frame-slot{min-width:0;min-height:0}
.photo-frame-slot>.book-photo-edit{flex:none;min-width:0;min-height:0;max-height:none;margin:0;justify-self:center;align-self:center}
#book-preview .cover .cover-photo-slot{flex:1;width:100%;height:auto;min-height:0;max-height:none;overflow:visible}
.cover-photo-slot>.book-photo-edit{min-height:0;max-height:none}
.photo-move-handle,.photo-resize-handle{position:absolute;z-index:8;display:grid;place-items:center;width:24px;height:24px;border:1px solid #eee8db90;border-radius:5px;background:#1c251de8;color:#fff;font:17px/1 Arial,sans-serif;opacity:0;touch-action:none;user-select:none;cursor:grab}
.photo-move-handle{top:4px;right:4px}.photo-resize-handle{bottom:4px;right:4px;cursor:nwse-resize;font-size:14px}
.book-photo-edit:hover .photo-move-handle,.book-photo-edit:hover .photo-resize-handle,.book-photo-edit:focus-within .photo-move-handle,.book-photo-edit:focus-within .photo-resize-handle,.book-photo-edit.is-cropping .photo-move-handle,.book-photo-edit.is-cropping .photo-resize-handle{opacity:1}
.book-photo-edit .photo-edit-hint{left:6px;right:auto}
.is-moving-photos .book-photo-edit{cursor:copy;outline:1px dashed #d8cbb088;outline-offset:2px}
.book-photo-edit.is-photo-source{opacity:.5}.book-photo-edit.is-drop-target{outline:3px solid #e7aa7c;outline-offset:4px;box-shadow:0 0 0 8px #e7aa7c22}
.book-drag-ghost{position:fixed;z-index:10000;width:76px;height:96px;padding:4px;background:#f5f2e9;border-radius:3px;box-shadow:0 12px 30px #0008;pointer-events:none;transform:rotate(5deg)}
.book-drag-ghost img{width:100%;height:100%;object-fit:cover;display:block}
.book-move-status{position:fixed;z-index:100;left:calc(var(--studio-sidebar) + (100vw - var(--studio-sidebar))/2);bottom:calc(90px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);max-width:calc(100vw - var(--studio-sidebar) - 30px);width:380px;display:flex;align-items:center;gap:14px;background:#1b241bf5;border:1px solid #e7aa7c77;border-radius:12px;padding:12px 14px;box-shadow:0 8px 30px #0005;color:#f5f3ed;font-size:10px;line-height:1.5}
.book-move-status button{border:0;background:none;color:#e7aa7c;font-size:10px;padding:7px;flex-shrink:0}
#crop-move{font-size:10px;padding:5px 0;margin-bottom:5px}
.turn-face .photo-move-handle,.turn-face .photo-resize-handle,.turn-stationary .photo-move-handle,.turn-stationary .photo-resize-handle{visibility:hidden}
@media(hover:none){.photo-move-handle,.photo-resize-handle{opacity:1;width:28px;height:28px}}
@media(max-width:700px){.book-move-status{left:50%;max-width:calc(100vw - 24px)}}

/* A persistent design library separates book setup, content and visual styling. */
#studio{--studio-sidebar:440px;padding-bottom:0}
.studio-layout{position:relative;grid-template-columns:var(--studio-sidebar) minmax(0,1fr);min-height:0;height:calc(100dvh - 170px);align-items:stretch}
.studio-bar{height:90px;box-sizing:border-box}
.editor-tools{position:fixed;left:0;top:170px;bottom:0;width:68px;z-index:30;display:flex;flex-direction:column;gap:4px;padding:12px 5px;background:#10140f;border-right:1px solid #ffffff12;overflow:auto}
.editor-tools button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;width:56px;min-height:62px;flex-shrink:0;padding:8px 3px;border:0;border-radius:9px;background:none;color:#a9b2a3;font-size:9px}
.editor-tools button>span{font-size:23px;line-height:1}
.editor-tools button:hover{background:#ffffff08;color:#f7f2e8}.editor-tools button[aria-pressed=true]{background:#e9dfce18;color:#f3dfbe;box-shadow:inset 2px 0 #d8b78c}.editor-tools button:disabled{opacity:.35;cursor:default}
.controls{height:100%;min-height:0;overflow-y:auto;padding:26px 22px 24px 88px;scrollbar-width:thin;scrollbar-color:#ffffff30 transparent}
.controls h1{font-size:29px}.controls>.eyebrow{margin-top:0}.controls>.muted{font-size:12px;line-height:1.7;margin-bottom:20px}
.controls .book-options{padding:12px 15px;margin-bottom:12px}.controls .book-options legend{font-size:12px}.controls .field{margin:18px 0}.controls .field select{font-size:11px}.controls .gelato-price{font-size:25px}
.preview-area{position:relative;top:auto;height:100%;min-height:0;align-self:stretch;padding:24px 28px 105px;background-color:#232820;background-image:radial-gradient(#ffffff06 1px,transparent 1px),url('assets/grain.png');background-size:18px 18px,auto}
.library-intro{font-size:12px;line-height:1.8;color:#aab4a5;margin:0 0 20px}
.controls #page-composer{position:static;transform:none;width:100%;max-height:none;overflow:visible;border:0;border-radius:0;padding:0;box-shadow:none;background:none;backdrop-filter:none}
.controls .page-layout-choices{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.controls .layout-choice{padding:10px;font-size:10px;gap:9px;border-radius:10px;transition:background .2s,border-color .2s}
.controls .layout-choice:hover{background:#ffffff08;border-color:#ffffff55}
.controls .layout-mini{width:100%;height:112px;padding:14px;gap:6px}
.controls .layout-mini.mini-sequence{padding-top:62px}.controls .layout-choice[aria-pressed=true]{box-shadow:0 0 0 1px #d8b78c;border-color:#d8b78c}
.controls #crop-panel{position:static;transform:none;left:auto;right:auto;bottom:auto;width:100%;max-height:none;padding:14px;margin:0 0 22px;box-shadow:none;overflow:visible;backdrop-filter:none}
.book-theme-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.theme-choice{display:flex;flex-direction:column;align-items:stretch;gap:10px;border:1px solid #ffffff24;border-radius:10px;background:#ffffff03;padding:9px;color:#f5f1e8;text-align:left}
.theme-choice:hover{background:#ffffff09;border-color:#ffffff60}.theme-choice[aria-pressed=true]{border-color:#d8b78c;box-shadow:0 0 0 1px #d8b78c}
.theme-mini{display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.3;box-shadow:0 4px 9px #0004;border-radius:2px;overflow:hidden;color:var(--mini-ink)}
.theme-mini-page{padding:12px 8px;display:flex;flex-direction:column;justify-content:center;gap:7px;background:var(--mini-paper);min-width:0}
.theme-mini-page+.theme-mini-page{box-shadow:inset 5px 0 8px -8px #000}.theme-mini-page strong{font-size:25px;font-weight:400}.theme-mini-page i{display:block;width:80%;height:7px;background:currentColor;opacity:.18}.theme-mini-page img{width:100%;height:58px;object-fit:cover}.theme-label{font-size:11px}.theme-swatches{display:flex;gap:5px}.theme-swatches i{width:13px;height:13px;border-radius:50%;border:1px solid #ffffff20}
#theme-feedback{font-size:10px;line-height:1.6;margin-top:18px}
.page{background:var(--page-bg,#faf7ef);color:var(--page-ink,#29382e)}
.book-page-caption{font-family:var(--book-typeface,Georgia,serif);color:var(--caption-ink,#50564b)}
.page .page-month,.page .page-number{color:var(--caption-ink,#50564b)}
.page-layout-button{background:var(--page-bg,#faf7ef);color:var(--caption-ink,#50564b)}
.cover .cover-heading{font-family:var(--book-typeface,Georgia,serif)}
@media(min-width:701px) and (max-width:1000px){#studio{--studio-sidebar:390px}.controls{padding-left:84px;padding-right:16px}.controls .layout-mini{height:96px;padding:10px}}
@media(max-width:700px){
 #studio{--studio-sidebar:0px;padding-bottom:100px}.studio-bar{height:90px}
 .studio-layout{display:flex;flex-direction:column;height:auto;min-height:0}
 .editor-tools{position:sticky;order:-2;top:74px;left:auto;bottom:auto;flex-direction:row;justify-content:space-around;width:100%;height:58px;padding:3px 5px;overflow:visible;border-right:0;border-bottom:1px solid #ffffff20;z-index:40}
 .editor-tools button{min-height:50px;width:15%;padding:4px 2px;gap:4px;font-size:8px}.editor-tools button>span{font-size:19px}
 .controls{height:auto;overflow:visible;width:100%;padding:22px 5%;scroll-margin-top:calc(132px + 36dvh)}
 .preview-area{order:-1;position:sticky;top:132px;height:clamp(220px,36dvh,300px);min-height:0;padding:12px 4% 10px;z-index:15}
 .controls #page-composer,.controls #crop-panel{position:static;width:100%;transform:none}
 .controls .layout-mini{height:115px}.book-theme-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(min-width:1001px){.studio-layout{height:calc(100dvh - 192px)}.editor-tools{top:192px}}
.theme-mini{aspect-ratio:1.6}
.controls #text-caption-section{border-top:1px solid #ffffff20;margin-top:24px;padding-top:16px}
.controls #text-caption-section h3{font-size:13px;font-weight:500}
.controls #text-caption-input{width:100%;resize:vertical;min-height:100px;padding:12px;border:1px solid #ffffff30;background:#ffffff06;border-radius:5px;color:inherit;font:inherit;line-height:1.6}

/* Persistent page overview */
.page-filmstrip{position:fixed;bottom:0;left:var(--studio-sidebar);right:0;z-index:89;background:#151815f5;border-top:1px solid #ffffff20;padding:7px 16px max(8px,env(safe-area-inset-bottom));backdrop-filter:blur(20px)}
.filmstrip-hint{font-size:9px;color:#aaa;margin-bottom:6px;text-align:center}
#page-thumbnails{display:flex;gap:10px;overflow-x:auto;overscroll-behavior:contain;padding:4px 3px 7px;scrollbar-width:thin;scrollbar-color:#60665e transparent}
.page-thumbnail{flex:0 0 62px;min-width:0;background:transparent;border:0;padding:0;color:#aaa;touch-action:pan-x}
.thumbnail-paper{height:64px;display:flex;flex-direction:column;padding:6px;box-shadow:0 2px 4px #0005;border-radius:1px;outline:2px solid transparent;outline-offset:2px}
.thumbnail-paper:not(.exact-page-thumbnail) .page-photo-area{flex:1;min-height:0;gap:2px;width:100%;color:#334339;align-items:center;justify-content:center}
.thumbnail-paper:not(.exact-page-thumbnail) .photo-frame-slot{min-width:0;min-height:0;height:100%;width:100%;overflow:hidden}
.thumbnail-photo{width:100%;height:100%;object-fit:cover;display:block}
.thumbnail-caption{font:3px Georgia;overflow:hidden;max-height:7px;color:#555;margin-top:3px}
.thumbnail-number{font-size:9px;display:block;margin-top:6px}
.page-thumbnail[aria-current=page] .thumbnail-paper{outline-color:#fff}
.page-thumbnail:hover .thumbnail-paper{filter:brightness(1.08)}
.page-thumbnail.page-drop-target .thumbnail-paper{outline-color:#e9ab7e;transform:translateY(-3px)}
.dragging-page{opacity:.35}
#studio .preview-navigation{bottom:calc(128px + env(safe-area-inset-bottom,0px));padding:3px 10px}
#studio .preview-navigation button{width:34px;height:34px}
#studio .preview-area{padding-bottom:182px}
#studio .book-move-status{bottom:185px}
@media(max-width:700px){.page-filmstrip{left:0;padding-inline:10px}.thumbnail-paper{height:50px}.page-thumbnail{flex-basis:49px}#studio .preview-navigation{bottom:112px}#studio .preview-area{padding-bottom:16px;margin-bottom:170px}.filmstrip-hint{font-size:8px}}

/* Neutral charcoal inspector, inspired by the supplied control-panel reference. */
#studio .controls{--ink:#ededed;--muted:#a6a6a6;--line:#383838;color:#ededed;background:#202020;background-image:none;border-right:1px solid #373737;scrollbar-color:#555 #202020;color-scheme:dark}
#studio .controls h1{font-family:var(--font-ui);font-size:24px;font-weight:600;letter-spacing:-.6px;margin:7px 0 10px}
#studio .controls>.eyebrow{color:#929292;font-size:9px;letter-spacing:1.6px}
#studio .controls .muted,#studio .controls .privacy-note,#studio .controls .library-intro,#studio .controls .crop-help,#studio .controls .selection-reason{color:#aaa}
#studio .controls>.muted{padding-bottom:20px;margin-bottom:20px;border-bottom:1px solid #333;line-height:1.65}
#studio .editor-tools{background:#181818;border-color:#353535}
#studio .editor-tools button{color:#999;border-radius:12px}
#studio .editor-tools button:hover{background:#292929;color:#eee}
#studio .editor-tools button[aria-pressed=true]{background:#353535;color:#fff;box-shadow:none}
#studio .controls .book-options{border:0;border-radius:0;background:none;padding:0;margin-bottom:16px}
#studio .controls .book-options legend{padding:0;margin-bottom:12px;font-size:13px;font-weight:500;color:#ddd}
#studio .controls .field{gap:7px;margin:10px 0;color:#bdbdbd}
#studio .controls .field input,#studio .controls .field select,#studio .controls textarea,#studio .controls #text-caption-input{border:1px solid transparent;border-radius:12px;background:#2c2c2c;color:#e0e0e0;padding:13px 14px;min-height:46px;font-size:12px;box-shadow:none;transition:background .15s,border-color .15s}
#studio .controls .field input:hover,#studio .controls .field select:hover,#studio .controls textarea:hover{background:#323232}
#studio .controls input:focus-visible,#studio .controls select:focus-visible,#studio .controls textarea:focus-visible,#studio .controls button:focus-visible{outline:2px solid #bbb;outline-offset:3px}
#studio .controls .spec-fields{gap:0 10px}




#studio .controls .text-button{color:#ddd}
#studio .controls .upload-zone{border:1px dashed #505050;border-radius:14px;background:#292929;padding:24px 14px;margin-top:16px;color:#e3e3e3}
#studio .controls .upload-zone:hover{background:#333;border-color:#777}
#studio .controls .upload-zone>span:last-child{color:#999}
#studio .controls .layout-choice,#studio .controls .theme-choice{background:#2b2b2b;border:1px solid transparent;border-radius:13px;color:#ccc;padding:10px}
#studio .controls .layout-choice:hover,#studio .controls .theme-choice:hover{background:#333;border-color:#555}
#studio .controls .layout-choice[aria-pressed=true],#studio .controls .theme-choice[aria-pressed=true]{background:#353535;border-color:#a5a5a5;box-shadow:0 0 0 1px #a5a5a5;color:#fff}
#studio .controls .layout-mini,#studio .controls .theme-mini{border-radius:6px;overflow:hidden}
#studio .controls .photo-item .thumbnail{border-radius:8px}
#studio .controls .photo-tools button{color:#bbb}
#studio .controls .photo-tools button:last-child{color:#ca9690}
#studio .controls #crop-panel{background:#252525;border:1px solid #3c3c3c;border-radius:16px;padding:14px}
#studio .controls .crop-modes{padding:4px;background:#1d1d1d;border-radius:12px;gap:4px}
#studio .controls .crop-modes button{border:0;border-radius:9px;color:#999;padding:10px 5px}
#studio .controls .crop-modes button[aria-pressed=true]{background:#3a3a3a;color:#eee}
#studio .controls .crop-slider{background:#2e2e2e;border-radius:11px;padding:13px 10px;margin:8px 0;color:#ccc;grid-template-columns:63px minmax(0,1fr) 34px}
#studio .controls input[type=range],#studio .controls input[type=checkbox]{accent-color:#bcbcbc}
#studio .controls .notice{background:#303030;border:1px solid #454545;border-radius:12px;color:#ccc;padding:13px}
#studio .controls .notice.good{background:#2b322e;border-color:#48534b}
#studio .controls .step-actions{border-top:1px solid #333;margin-top:24px;padding-top:18px}
#studio .controls .palette button{border-color:#202020}
#studio .controls .palette button[aria-pressed=true]{outline-color:#ccc}
@media(min-width:701px){#studio .controls{border-radius:18px 0 0 0}}

.guided-flow{position:fixed;inset:0;z-index:150;background:#101110f5;overflow:auto;padding:40px 20px;backdrop-filter:blur(20px);color:#eee;color-scheme:dark}
.flow-open{overflow:hidden}.flow-card{max-width:760px;margin:auto;background:#202020;border:1px solid #393939;border-radius:24px;padding:28px 36px;box-shadow:0 24px 90px #0006}
.flow-card header{display:flex;align-items:center;gap:20px;color:#aaa;margin-bottom:35px}.flow-brand{font-size:32px;color:#eee}.flow-card #flow-close{margin-left:auto;border:0;background:#303030;border-radius:50%;width:34px;height:34px;color:#ccc;font-size:23px}
.flow-card h1{margin:12px 0 18px}.flow-card .muted{color:#aaa;}
.flow-card footer{padding:24px 0 0;margin-top:28px;border-top:1px solid #383838;justify-content:space-between}.flow-card .button{background:#ece8df;color:#222;border:0;border-radius:12px}.flow-card .secondary-button{border:1px solid #454545;background:#2c2c2c;border-radius:12px;color:#ddd;margin-top:0}
.story-choices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:30px 0}.story-choice{border:1px solid #444;border-radius:14px;background:#292929;min-height:120px;color:#ccc;padding:20px}.story-choice[aria-pressed=true]{border-color:#ddd;background:#383838;color:white;box-shadow:inset 0 0 0 1px #ddd}
.flow-dates{color:#aaa;margin-top:25px}.flow-dates summary{cursor:pointer}.flow-card .field input,.flow-card .field select{border:1px solid #444;border-radius:12px;background:#303030;color:#eee;padding:14px;min-height:48px}.flow-card .field{color:#bbb;}
.guided-flow[data-phase=size] .book-options{border:0;background:none;padding:0;margin:25px 0}.guided-flow[data-phase=size] .book-options legend,.guided-flow[data-phase=size] .book-options>.field,.guided-flow[data-phase=size] .privacy-note,.guided-flow[data-phase=size] .gelato-price,.guided-flow[data-phase=size] .spec-fields>.field:not(:first-child){display:none}
.guided-flow[data-phase=size] .spec-fields{display:block}.guided-flow[data-phase=size] #gelato-status{display:block}.guided-flow[data-phase=size] #book-size{font-size:18px;min-height:70px;width:100%;border-radius:14px}
.guided-flow[data-phase=photos] .campaign-fields,.guided-flow[data-phase=photos] .selected-title,.guided-flow[data-phase=photos] #photo-grid,.guided-flow[data-phase=photos] #crop-panel{display:none}
.flow-card .upload-zone{border-radius:16px;background:#2b2b2b;border-color:#555;color:#eee;padding:30px}.flow-card .upload-zone>span:last-child{color:#aaa}.flow-card .privacy-note{color:#aaa}.flow-card .library-details{border-color:#444}.flow-card .curation-controls{border-color:#444}.flow-card .text-button{color:#ddd}.flow-card .candidate-grid{max-height:280px;overflow:auto}
.guided-flow[data-phase=reveal] #flow-content{text-align:center}.flow-card .cover{width:240px;max-height:300px;margin:35px auto;pointer-events:none;animation:book-reveal .65s ease-out both}.flow-card .cover .cover-image{min-height:0}.flow-card .cover .photo-frame{min-height:0}
@keyframes book-reveal{from{opacity:0;transform:translateY(24px) rotate(-7deg) scale(.95)}to{opacity:1;transform:translateY(0) rotate(-3deg) scale(1)}}
.book-session-actions{display:flex;align-items:center;gap:8px}.book-session-actions .secondary-button{margin:0;padding:9px 12px;border-radius:9px;color:#ccc;background:#292929;border-color:#444}.local-save-status{color:#999;max-width:155px;}.studio-bar>.secondary-button{border-radius:10px;margin:0;background:#eee;color:#222;border:0}
@media(max-width:700px){.guided-flow{padding:12px}.flow-card{padding:20px;border-radius:18px}.story-choices{gap:7px}.story-choice{padding:12px 6px;min-height:95px}.book-session-actions{gap:5px}.local-save-status{max-width:100px;}.studio-bar .prototype-tag{display:none}.studio-bar{height:auto;min-height:90px}.book-session-actions .secondary-button{padding:8px}.flow-card header{margin-bottom:20px}}
@media(prefers-reduced-motion:reduce){.flow-card .cover{animation:none}}
.size-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:20px}.size-card{background:#2a2a2a;border:1px solid #444;border-radius:14px;color:#bbb;padding:20px 10px;display:flex;flex-direction:column;align-items:center;justify-content:end;gap:16px;}.size-card[aria-pressed=true]{border-color:#eee;background:#373737;color:#fff}.size-shape{height:55px;max-width:90px;display:block;background:#d5cec0;box-shadow:3px 3px 0 #777;border-radius:1px}.size-card strong{}.guided-flow[data-phase=size] .spec-fields{display:none}
@media(max-width:500px){.size-cards{grid-template-columns:repeat(2,1fr)}.size-card{padding:16px 8px}}
.selection-options{border-top:1px solid #3b3b3b;margin-top:22px;padding-top:18px;color:#aaa;font-size:12px}.selection-options>summary{cursor:pointer;padding:8px 0}.selection-options .curation-controls{margin-top:12px}.guided-flow[data-phase=reveal]{padding-block:20px}.guided-flow[data-phase=reveal] .flow-card{padding-block:22px}.guided-flow[data-phase=reveal] .flow-card header{margin-bottom:15px}.guided-flow[data-phase=reveal] h1{font-size:32px}.guided-flow[data-phase=reveal] .cover{width:205px;max-height:240px;margin:23px auto}.guided-flow[data-phase=reveal] footer{margin-top:20px;padding-top:18px}
.guided-flow[data-phase=size] #flow-content:has(.size-card) #gelato-status{display:none}.size-card small{color:#b5b5b5}

/* Creation has its own navigation; the marketing menu belongs to the home page. */
body:has(#studio:not([hidden])){padding-top:0}
body:has(#studio:not([hidden]))>.site-header{display:none}
@media(min-width:701px){
 body:has(#studio:not([hidden])) .studio-layout{height:calc(100dvh - 90px)}
 body:has(#studio:not([hidden])) .editor-tools{top:90px}
}
@media(max-width:700px){
 body:has(#studio:not([hidden])) .editor-tools{top:0}
 body:has(#studio:not([hidden])) .preview-area{top:58px}
}

/* The canvas starts at the top; essential actions live inside the inspector. */
body:has(#studio:not([hidden])) .studio-bar{display:none}
body:has(#studio:not([hidden])) .studio-layout{height:100dvh;min-height:0}
body:has(#studio:not([hidden])) .editor-tools{top:0}
#studio .panel-actions{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin:-8px 0 22px;padding-bottom:14px;border-bottom:1px solid #383838}
#studio .panel-actions #exit-studio{font-size:10px;padding:8px 4px;white-space:nowrap}
#studio .panel-actions .book-session-actions{display:contents}
#studio .panel-actions .secondary-button{margin:0;padding:8px;font-size:10px;border-radius:8px;min-height:32px}
#studio .panel-actions .local-save-status{order:5;flex-basis:100%;max-width:none;font-size:9px;margin-top:3px}
#studio .panel-actions>.secondary-button{margin-left:auto}
@media(max-width:700px){body:has(#studio:not([hidden])) .studio-layout{height:auto}#studio .panel-actions{margin-top:0}body:has(#studio:not([hidden])) .preview-area{top:58px}}

/* Cover compositions: printed colour and photographs, without simulated cloth or embossing. */
.designed-cover.cover{position:relative;display:block;padding:0!important;overflow:visible;container-type:inline-size;font-family:Georgia,serif;isolation:isolate}
.designed-cover .designed-title,.designed-cover .designed-subtitle,.designed-cover .designed-names,.designed-cover .designed-year{position:absolute;overflow:hidden;overflow-wrap:anywhere;color:inherit;z-index:2;font-weight:400;white-space:pre-wrap}
.designed-cover .designed-pictures{position:absolute;display:grid;min-height:0;gap:3%;z-index:1}
.designed-photo{display:block;position:relative;min-width:0;min-height:0;overflow:hidden;padding:0;border:0;border-radius:0;background:#0000000a;color:inherit;touch-action:none;width:100%;height:100%}
.designed-photo .designed-image{display:block;width:100%;height:100%;max-height:none;object-fit:cover;pointer-events:none}
button.designed-photo img{position:absolute;max-width:none;max-height:none;object-fit:fill}
.cover-photo-selected{outline:none}
.designed-photo:focus-visible{outline:2px solid #d4a075;outline-offset:4px}.cover-empty{font:20px sans-serif;color:inherit}
.cover-journal .designed-pictures{left:24%;top:20%;width:52%;height:43%}
.cover-journal .designed-title{top:67%;left:12%;width:76%;height:16%;font-family:'Bradley Hand','Segoe Print','Comic Sans MS',cursive;font-size:7.5cqw;line-height:1.1;text-align:center}
.cover-journal .designed-subtitle{top:8%;left:12%;width:76%;height:8%;font-size:2.6cqw;line-height:1.4;letter-spacing:.08em;text-align:center}
.cover-journal .designed-names{bottom:9%;left:12%;width:76%;height:5%;font-size:2.8cqw;text-align:center}
.cover-journal .designed-year{bottom:4%;left:12%;width:76%;font:2.8cqw 'DM Sans',sans-serif;letter-spacing:.2em;text-align:center}
.cover-art .designed-pictures{right:12%;top:16%;width:44%;height:43%}
.cover-art .designed-title{top:22%;left:10%;width:29%;height:34%;font-size:4.3cqw;line-height:1.35}
.cover-art .designed-subtitle{bottom:24%;left:15%;width:70%;height:12%;font-size:3.1cqw;text-align:center;line-height:1.4}
.cover-art .designed-names{bottom:7%;right:8%;width:60%;height:8%;font-size:2.7cqw;text-align:right}
.cover-art .designed-year{bottom:7%;left:8%;font-size:2.7cqw}
.cover-strip .designed-title{top:6%;left:10%;width:80%;height:18%}
.cover-strip .designed-pictures{top:28%;left:33%;width:34%;height:48%;grid-template-rows:repeat(3,minmax(0,1fr))}
.cover-strip .designed-subtitle{top:80%;left:10%;width:80%;height:10%;font-size:5cqw;line-height:1.1;text-align:center;font-style:italic}
.cover-strip .designed-names{bottom:4%;left:8%;width:62%;height:5%;font-size:2.5cqw}
.cover-strip .designed-year{bottom:4%;right:8%;font-size:2.5cqw}
.change-cover{position:absolute;top:-31px;right:0;padding:7px 10px;border:1px solid #ffffff30;border-radius:8px;background:#252525;color:#eee;font-size:10px;white-space:nowrap;transform:rotate(3deg)}
.cover-designs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:24px}
#studio .controls .cover-design-choice{background:#2c2c2c;border:1px solid transparent;border-radius:12px;padding:8px 6px;min-width:0;color:#ccc;text-align:left;display:flex;flex-direction:column;gap:8px}
#studio .controls .cover-design-choice[aria-pressed=true]{border-color:#ddd;box-shadow:0 0 0 1px #ddd;background:#353535}
.cover-design-choice strong{font-size:10px;font-weight:500}.cover-design-choice small{font-size:8px;line-height:1.5;color:#aaa}
.cover-card-preview.cover{width:100%;aspect-ratio:var(--book-ratio,1);height:auto;min-height:0;max-height:none;box-shadow:1px 3px 4px #0004;transform:none;pointer-events:none;margin:0}
.cover-frame-settings{margin-top:22px;padding-top:16px;border-top:1px solid #3b3b3b}.cover-frame-settings h3{font-size:13px;font-weight:500}.cover-photo-tabs{display:flex;gap:9px;margin:14px 0}.cover-photo-tabs button{background:#2d2d2d;padding:5px;border:1px solid #555;border-radius:8px;color:#ddd;flex:1;max-width:90px}.cover-photo-tabs button[aria-pressed=true]{border-color:#eee}.cover-photo-tabs img{width:100%;height:62px;object-fit:cover;display:block;border-radius:3px}.cover-photo-tabs span{font-size:10px;display:block;margin-top:5px}.cover-frame-settings .crop-modes{margin-top:15px}
.thumbnail-cover.cover{width:100%;height:64px;min-height:0;max-height:none;transform:none;box-shadow:none;margin:0;outline:2px solid transparent;outline-offset:2px;aspect-ratio:auto}
.page-thumbnail[aria-current=page] .thumbnail-cover{outline-color:#fff}
#studio .editor-tools button{min-height:56px}
@media(max-width:700px){#studio .editor-tools button{width:calc(100% / 7);min-height:50px}.thumbnail-cover.cover{height:50px}.cover-design-choice small{display:none}}
.designed-cover .designed-photo img{position:absolute;max-width:none;max-height:none;object-fit:fill;transform:none}
.import-warning{padding:14px;border:1px solid #ad8158;border-radius:12px;background:#ad815815;max-height:260px;overflow:auto;font-size:11px;line-height:1.6;margin-top:16px}.import-warning strong{display:block;color:#f0cfaa;margin-top:12px}.preview-top #photo-count{letter-spacing:.4px;text-align:right;line-height:1.5;max-width:70%}
.designed-slot{position:relative;min-width:0;min-height:0;width:100%;height:100%}
.cover-frame-replace{position:absolute;bottom:5px;right:5px;z-index:4;border:1px solid #ffffff55;background:#202020e8;color:#fff;border-radius:6px;padding:6px 8px;font:9px 'DM Sans',sans-serif;white-space:nowrap;box-shadow:0 2px 8px #0003}
.cover-frame-replace:hover{background:#444}.cover-frame-replace:focus-visible{outline:2px solid #e7aa7c;outline-offset:2px}
.cover-image-choices{border-bottom:1px solid #3b3b3b;margin-bottom:20px;padding-bottom:16px}.cover-image-choices h3{font-size:13px;font-weight:500}.cover-image-choices #cover-replace{width:100%;margin-top:0}
.page-management{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:7px;color:#ccc;font-size:10px}
.page-management-label{display:flex;align-items:center;gap:6px}.page-management select,.page-management button{font:10px 'DM Sans',sans-serif;color:#eee;background:#2d302c;border:1px solid #ffffff25;border-radius:7px;min-height:30px;padding:5px 8px}.page-management button:hover:not(:disabled){background:#41463f}.page-management button:disabled{opacity:.35;cursor:default}.page-management select{max-width:100px;color-scheme:dark}.page-management #managed-page-count{margin-left:auto;color:#aaa}.page-management #page-count-warning{color:#f0cba5;border-color:#b68c5c80}.page-edit-status{width:100%;font-size:9px;color:#b7c5b0}.page-edit-status:empty{display:none}
.page-thumbnail[aria-current=page] .thumbnail-paper{outline-color:#fff;box-shadow:0 0 0 3px #fff2}
#studio .preview-navigation{bottom:calc(172px + env(safe-area-inset-bottom,0px))}
#studio .preview-area{padding-bottom:226px}
#studio .book-move-status{bottom:230px}
.add-page-photo{border:1px dashed #a4a49570;border-radius:2px;background:transparent;color:var(--page-ink);font:clamp(9px,2.5cqw,14px) 'DM Sans',sans-serif;min-height:60px;width:100%;height:100%;padding:10px}.add-page-photo:hover{background:#00000008}
#page-photo-picker .page-picker-photo:disabled{opacity:.6;cursor:not-allowed}

@media(max-width:700px){.page-management{gap:5px;font-size:9px}.page-management button,.page-management select{font-size:9px;padding:5px;min-height:29px}.page-management #managed-page-count{margin-left:0}.page-filmstrip .filmstrip-hint{display:none}#studio .preview-navigation{bottom:calc(162px + env(safe-area-inset-bottom,0px))}#studio .preview-area{padding-bottom:16px;margin-bottom:205px}}

/* Keep cover controls quiet until the user interacts with a photo. */
@media (hover:hover) and (pointer:fine){
 .cover-frame-replace{opacity:0;pointer-events:none;transition:opacity .18s ease}
 .designed-slot:hover .cover-frame-replace,.designed-slot:focus-within .cover-frame-replace{opacity:1;pointer-events:auto}
}
@media (prefers-reduced-motion:reduce){.cover-frame-replace{transition:none}}

/* Actual DialKit controls sit in the existing inspector; custom book tools share its tokens. */
#studio .controls{background:#1c1c1e;border-color:#ffffff14;padding-top:22px}
#studio .controls .dial-native-control{display:none!important}
.dial-editor-control{--dial-radius:10px;--dial-surface:#ffffff0b;--dial-surface-hover:#ffffff12;--dial-surface-active:#ffffff18;--dial-text-label:#ffffffad;--dial-font-size:12px;width:100%;min-width:0;margin:6px 0}
.dial-editor-control.is-disabled{opacity:.4}
#studio .controls .dialkit-text-input{border:0;border-radius:0;padding:0;min-height:0;background:transparent;color:inherit;font:inherit;line-height:1.4;box-shadow:none;resize:none}
#studio .controls .dialkit-slider-input,#studio .controls .dialkit-color-value{border:0;border-radius:0;min-height:0;padding:0;background:transparent;color:inherit;font:inherit;box-shadow:none}
#studio .controls .dialkit-text-control,#studio .controls .dialkit-color-control{min-height:42px}
#studio .controls .dialkit-select,#studio .controls .dialkit-slider{min-height:42px}
#studio .controls .dialkit-slider-value,#studio .controls .dialkit-color-value{font-variant-numeric:tabular-nums;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
#studio .controls .dialkit-folder-header{padding-inline:0}
#studio .controls .dialkit-folder-inner{padding-inline:0}
.dial-editor-folder{margin:16px 0;border-top:1px solid #ffffff12;padding-top:4px}
.dial-spec-wide{grid-column:1/-1}
.spec-fields .dial-editor-control[data-native-control=book-size]{grid-column:1/-1}
#studio .controls .cover-frame-settings{border:0;padding-top:0;margin-top:8px}
#studio .controls .palette{margin:12px 0 16px}.dial-editor-control .dialkit-segmented{background:#ffffff08;border-radius:10px;padding:3px}
.dial-editor-control .dialkit-segmented-button{flex:1;font-size:11px;padding:9px 4px}
#studio .controls .cover-design-choice,#studio .controls .layout-choice,#studio .controls .theme-choice{background:#ffffff06;border:1px solid #ffffff0d;border-radius:10px;transition:background .16s,border-color .16s,box-shadow .16s}
#studio .controls .cover-design-choice:hover,#studio .controls .layout-choice:hover,#studio .controls .theme-choice:hover{background:#ffffff0d;border-color:#ffffff35}
#studio .controls .cover-design-choice[aria-pressed=true],#studio .controls .layout-choice[aria-pressed=true],#studio .controls .theme-choice[aria-pressed=true]{background:#ffffff10;border-color:#ffffff65;box-shadow:0 0 0 1px #ffffff25}
#studio .controls .cover-image-choices{border-color:#ffffff14}
#studio .controls .cover-photo-tabs button{border-radius:9px;background:#ffffff08;border-color:#ffffff18}
#studio .controls .cover-photo-tabs button[aria-pressed=true]{border-color:#ffffff85;background:#ffffff14}
#studio .controls .secondary-button,.page-management button,.page-management select{border-radius:9px;background:#ffffff09;border-color:#ffffff1a;color:#ffffffbf}
#studio .controls .secondary-button:hover,.page-management button:hover:not(:disabled){background:#ffffff14;color:white}
.guided-flow[data-phase=size] .book-options>.dial-editor-control{display:none}
.guided-flow .dial-editor-control{color:#eee}
@media(prefers-reduced-motion:reduce){#studio .controls .cover-design-choice,#studio .controls .layout-choice,#studio .controls .theme-choice{transition:none}}
#studio .controls .cover-design-choice small{display:none}
#studio .controls .cover-designs{margin:4px 0 12px;gap:8px}
#studio .controls .cover-design-choice{padding:7px;font-size:10px}
#studio .controls .cover-photo-tabs img{height:48px}
#studio .controls .cover-image-choices h3{margin:12px 0 9px}
#studio .controls .cover-image-choices{padding-bottom:12px;margin-bottom:12px}
#studio .controls .dial-editor-folder{margin:12px 0}
#studio .controls .dial-editor-folder{border:0;padding:0;margin:8px 0}

/* Shared button visuals are owned by design-system.css. */
.site-header .ui-button span,.hero .ui-button span{margin-left:0}
#studio .panel-actions{gap:4px;align-items:center}
#studio .panel-actions>.ui-button{margin-left:auto}
#studio .panel-actions #exit-studio{margin-left:0}
.photo-tools{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
.photo-tools .ui-button{--ui-min-width:0;width:100%}
#studio .preview-navigation{bottom:calc(var(--filmstrip-height,150px) + 12px)}
#studio .preview-area{padding-bottom:calc(var(--filmstrip-height,150px) + 85px)}
#studio .book-move-status{bottom:calc(var(--filmstrip-height,150px) + 72px)}
@media(max-width:700px){#studio .preview-area{padding-bottom:16px;margin-bottom:calc(var(--filmstrip-height,150px) + 60px)}.page-management{gap:5px}.ui-button{max-width:100%}}
@media(hover:none),(pointer:coarse){html :is(body,#goldfish-foto-button-system) button.ui-button.ui-button{min-height:44px}html :is(body,#goldfish-foto-button-system) button.ui-button.ui-button.cover-frame-replace{min-height:36px}}
@media(prefers-reduced-motion:reduce){html :is(body,#goldfish-foto-button-system) button.ui-button.ui-button{transition:none}}
#page-count-warning.ui-button{--ui-ink:#e9c8a1;--ui-border:#9b785c66;--ui-hover:#9b785c22}
.language-menu button{min-height:36px;border-radius:8px;transition:background-color var(--button-duration)}
@media(hover:none),(pointer:coarse){.language-menu button{min-height:44px}}
@media(max-width:700px){
 #studio .editor-tools button{flex:1;min-width:0;width:auto}
 #studio .preview-area{margin-bottom:0}
 #studio .controls{padding-bottom:calc(var(--filmstrip-height,180px) + 60px)}
 #studio{padding-bottom:0}
 #studio .change-cover{display:none}
}
@media(max-width:700px){#studio button.ui-button.change-cover{display:none}}

/* A quiet, light cutting-mat surface behind the book. */
#studio .preview-area{background-color:#f5f5f2;background-image:linear-gradient(#343b3610 1px,transparent 1px),linear-gradient(90deg,#343b3610 1px,transparent 1px),linear-gradient(#343b3607 1px,transparent 1px),linear-gradient(90deg,#343b3607 1px,transparent 1px);background-size:100px 100px,100px 100px,20px 20px,20px 20px;background-position:center}
#studio .preview-top{color:#717670}
#studio .preview-note{color:#737770}
#studio .preview-area .spread{box-shadow:0 12px 32px #252b2520,0 2px 7px #252b2514}
#studio .preview-area .cover{box-shadow:4px 6px 0 -2px #d1d0c9,0 16px 35px #252b2528}
#studio .preview-area .change-cover.ui-button{--ui-fill:#f5f5f2ed;--ui-ink:#555b55;--ui-border:#565c5626;--ui-hover:#e4e5df;--ui-hover-ink:#202520}


/* Artwork keeps its established default; UI typography lives in design-system.css. */
:is(.page,.cover,.mini-cover,.hero-book,.thumbnail-paper,.thumbnail-cover),
:is(.page,.cover,.mini-cover,.hero-book,.thumbnail-paper,.thumbnail-cover) *{font-family:var(--font-ui)!important}

/* Scrapbook: one full-width scene, a Polaroid, a small stamp and a personal note. */
.page.book-layout-scrapbook{padding:0;background-color:var(--page-bg,#f4eadb);background-image:radial-gradient(#6e655d08 .6px,transparent .7px);background-size:3px 3px;display:block;overflow:hidden}
.book-layout-scrapbook .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-scrapbook .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-scrapbook .page-photo-area>.photo-frame-slot:first-child{left:0;top:53%;width:100%;height:47%;z-index:0}
.book-layout-scrapbook .page-photo-area>.photo-frame-slot:nth-child(2){left:25%;top:26%;width:52%;height:49%;padding:2% 2% 11%;background:#faf9f2;transform:rotate(-4deg);box-shadow:1px 3px 5px #24251e25;z-index:3}
.book-layout-scrapbook .page-photo-area>.photo-frame-slot:nth-child(2)::before{content:'';position:absolute;width:47%;height:12%;right:-13%;top:0;transform:rotate(29deg);background-color:#b4c58b;background-image:linear-gradient(90deg,#4f6a3b24 50%,transparent 50%),linear-gradient(#4f6a3b24 50%,transparent 50%);background-size:8px 8px;clip-path:polygon(2% 0,98% 0,100% 14%,98% 28%,100% 42%,98% 56%,100% 70%,98% 84%,100% 100%,2% 100%,0 84%,2% 70%,0 56%,2% 42%,0 28%,2% 14%);z-index:6;pointer-events:none;opacity:.9}
.book-layout-scrapbook .page-photo-area>.photo-frame-slot:nth-child(2)::after{content:'';position:absolute;left:-10%;top:29%;width:14%;height:58%;z-index:-1;background:repeating-linear-gradient(transparent 0 10%,#98958725 10% 11%),#eee9de;border-left:3px dotted #c9c4b6;transform:rotate(5deg);pointer-events:none}
.book-layout-scrapbook .page-photo-area>.photo-frame-slot:nth-child(3){left:13%;top:62%;width:32%;height:21%;padding:2.8%;background:#b1bc8c;transform:rotate(4deg);box-shadow:1px 2px 4px #24251e22;z-index:5;clip-path:polygon(0 4%,4% 0,8% 4%,12% 0,16% 4%,20% 0,24% 4%,28% 0,32% 4%,36% 0,40% 4%,44% 0,48% 4%,52% 0,56% 4%,60% 0,64% 4%,68% 0,72% 4%,76% 0,80% 4%,84% 0,88% 4%,92% 0,96% 4%,100% 0,100% 96%,96% 100%,92% 96%,88% 100%,84% 96%,80% 100%,76% 96%,72% 100%,68% 96%,64% 100%,60% 96%,56% 100%,52% 96%,48% 100%,44% 96%,40% 100%,36% 96%,32% 100%,28% 96%,24% 100%,20% 96%,16% 100%,12% 96%,8% 100%,4% 96%,0 100%)}
.page.book-layout-scrapbook .book-page-caption{position:absolute;left:13%;top:18%;width:29%;height:23%;margin:0;padding:6% 4%;transform:rotate(13deg);z-index:7;overflow:auto;align-self:auto;box-shadow:1px 2px 4px #29251c22;background-color:#f4f0e6;background-image:linear-gradient(#7d766512 1px,transparent 1px),linear-gradient(90deg,#7d766512 1px,transparent 1px);background-size:7px 7px;color:#4c5340;font-size:clamp(5px,2.2cqw,11px);line-height:1.45;cursor:text;scrollbar-width:thin;white-space:pre-wrap}
.page.book-layout-scrapbook .book-page-caption.is-placeholder{color:#818571;font-style:italic}
.page.book-layout-scrapbook .page-layout-button{z-index:10}
.page.book-layout-scrapbook .page-month{top:4%;left:6.4%;color:var(--page-ink)}
.page.book-layout-scrapbook .page-number{left:7%;bottom:3%;z-index:9;color:#fff;text-shadow:0 1px 3px #0009}
.book-layout-scrapbook .page-photo-area>.add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
.thumbnail-paper.book-layout-scrapbook{position:relative;overflow:hidden;padding:0}
.thumbnail-paper.book-layout-scrapbook .thumbnail-caption{position:absolute;top:18%;left:13%;width:29%;height:23%;max-height:none;z-index:7;transform:rotate(13deg);background:#f4f0e6;font-size:2px;padding:3px;color:#4c5340}
.thumbnail-paper.book-layout-scrapbook .page-photo-area>.photo-frame-slot:nth-child(2){padding:2% 2% 11%}
.mini-scrapbook{position:relative;display:block;overflow:hidden;background:#f2ecdf}
.mini-scrapbook i{position:absolute;min-height:0}
.mini-scrapbook i:nth-child(1){left:0;top:53%;width:100%;height:47%}
.mini-scrapbook i:nth-child(2){left:25%;top:26%;width:52%;height:49%;border:5px solid #faf9f2;border-bottom-width:13px;transform:rotate(-4deg);box-shadow:1px 2px 3px #0003;z-index:2}
.mini-scrapbook i:nth-child(3){left:13%;top:62%;width:32%;height:21%;border:4px solid #bebda7;transform:rotate(4deg);z-index:3}
.mini-scrapbook::after{content:'';position:absolute;left:13%;top:18%;width:29%;height:23%;background:#e0d8c6;transform:rotate(13deg);z-index:4;box-shadow:1px 1px 2px #0002}
.page.book-layout-scrapbook .book-page-caption{font-size:var(--note-type-scale,2.2cqw);overflow:hidden}
.thumbnail-paper.book-layout-scrapbook::after{content:'';position:absolute;top:18%;left:13%;width:29%;height:23%;z-index:6;background:#f4f0e6;transform:rotate(13deg);box-shadow:1px 1px 2px #0002;pointer-events:none}
.book-layout-scrapbook .page-photo-area::after{content:'';position:absolute;left:75%;top:43%;width:13%;height:29%;background:repeating-linear-gradient(-7deg,transparent 0 6px,#79735d22 6px 7px),#f1eedf;transform:rotate(-2deg);z-index:1;pointer-events:none}

/* Reference-inspired editorial compositions, shared by book and thumbnails. */
.page.book-layout-journal,.page.book-layout-horizon{padding:0;display:block;overflow:hidden}
.book-layout-journal .page-photo-area,.book-layout-horizon .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-journal .page-photo-area>.photo-frame-slot,.book-layout-horizon .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-journal .photo-frame-slot:nth-child(1){left:13%;top:10%;width:48%;height:28%}
.book-layout-journal .photo-frame-slot:nth-child(2){left:0;top:54%;width:43%;height:39%}
.book-layout-journal .photo-frame-slot:nth-child(3){left:70%;top:10%;width:27%;height:83%}
.page.book-layout-journal .book-page-caption{position:absolute;left:46%;top:54%;width:21%;max-height:36%;margin:0;font-size:1.8cqw;line-height:1.5;overflow:hidden;white-space:pre-wrap;cursor:text}
.book-layout-horizon .photo-frame-slot:nth-child(1){left:26%;top:51%;width:23%;height:42%}
.book-layout-horizon .photo-frame-slot:nth-child(2){left:50%;top:51%;width:23%;height:42%}
.book-layout-horizon .photo-frame-slot:nth-child(3){left:74%;top:51%;width:23%;height:42%}
.page.book-layout-horizon .book-page-caption{position:absolute;left:26%;top:7%;width:38%;max-height:34%;margin:0;font-size:2cqw;line-height:1.5;overflow:hidden;white-space:pre-wrap;cursor:text}
.page.book-layout-journal .book-page-caption.is-placeholder,.page.book-layout-horizon .book-page-caption.is-placeholder{opacity:.45}
.page.book-layout-journal .page-month,.page.book-layout-horizon .page-month{top:2.4%;left:3.2%;font-size:1.36cqw}
.page.book-layout-journal .page-number,.page.book-layout-horizon .page-number{left:4%;bottom:3%}
.book-layout-journal .add-page-photo,.book-layout-horizon .add-page-photo{position:absolute;inset:20%;width:60%;height:60%}
.thumbnail-paper.book-layout-journal,.thumbnail-paper.book-layout-horizon{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-journal .thumbnail-caption{position:absolute;left:46%;top:54%;width:21%;font-size:2px}
.thumbnail-paper.book-layout-horizon .thumbnail-caption{position:absolute;left:26%;top:7%;width:38%;font-size:2px}
.mini-journal,.mini-horizon{position:relative;display:block;overflow:hidden}
.mini-journal i,.mini-horizon i{position:absolute;min-height:0;background:#111}
.mini-journal i:nth-child(1){left:13%;top:10%;width:48%;height:28%}
.mini-journal i:nth-child(2){left:0;top:54%;width:43%;height:39%}
.mini-journal i:nth-child(3){left:70%;top:10%;width:27%;height:83%}
.mini-horizon i:nth-child(1){left:26%;top:51%;width:23%;height:42%}
.mini-horizon i:nth-child(2){left:50%;top:51%;width:23%;height:42%}
.mini-horizon i:nth-child(3){left:74%;top:51%;width:23%;height:42%}
.mini-journal::after,.mini-horizon::after{content:'';position:absolute;background:repeating-linear-gradient(#777 0 1px,transparent 1px 4px)}
.mini-journal::after{left:46%;top:54%;width:21%;height:22%}
.mini-horizon::after{left:26%;top:7%;width:38%;height:18%}

/* Magazine: immersive photograph alongside a blush editorial story. */
.page.book-layout-magazine{padding:0;display:block;overflow:hidden;background:#ecd3d5;color:#963b42}
.book-layout-magazine .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-magazine .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-magazine .photo-frame-slot:first-child{left:0;top:0;width:49%;height:100%}
.book-layout-magazine .photo-frame-slot:nth-child(2){left:78%;top:22%;width:19%;height:34%}
.page.book-layout-magazine .magazine-headline{position:absolute;left:53%;top:29%;width:23%;margin:0;font-size:5.2cqw;font-style:italic;line-height:1.08;overflow-wrap:anywhere;max-height:40%;overflow:hidden;cursor:text}
.page.book-layout-magazine .book-page-caption{position:absolute;left:62%;top:77%;width:34%;max-height:18%;margin:0;font-size:1.8cqw;line-height:1.45;white-space:pre-wrap;overflow:hidden;cursor:text}
.page.book-layout-magazine .page-month{left:52.4%;top:4%;color:#963b42;font-size:1.28cqw}
.page.book-layout-magazine .page-number{left:74%;bottom:2%;color:#963b42}
.page.book-layout-magazine .book-page-caption.is-placeholder{opacity:.5}
.book-layout-magazine .add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
.thumbnail-paper.book-layout-magazine{position:relative;padding:0;overflow:hidden;background:#ecd3d5!important}
.thumbnail-paper.book-layout-magazine .thumbnail-caption{position:absolute;left:54%;top:32%;width:22%;font-size:3px;color:#963b42}
.mini-magazine{position:relative;display:block;background:#ecd3d5;overflow:hidden}
.mini-magazine i{position:absolute;min-height:0;background:#111}
.mini-magazine i:first-child{left:0;top:0;width:49%;height:100%}
.mini-magazine i:nth-child(2){left:78%;top:22%;width:19%;height:34%}
.mini-magazine::before{content:'Aa';position:absolute;left:53%;top:30%;width:23%;font-size:18px;font-style:italic;color:#963b42}
.mini-magazine::after{content:'';position:absolute;left:62%;top:77%;width:34%;height:14%;background:repeating-linear-gradient(#963b42 0 1px,transparent 1px 4px)}

/* Quiet editorial layouts with a shared baseline and generous paper margins. */
.page.book-layout-portraitStory,.page.book-layout-panoramaFour{padding:0;display:block;overflow:hidden}
.book-layout-portraitStory .page-photo-area,.book-layout-panoramaFour .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-portraitStory .page-photo-area>.photo-frame-slot,.book-layout-panoramaFour .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-portraitStory .photo-frame-slot:first-child{left:50%;top:5%;width:47%;height:69%}
.page.book-layout-portraitStory .book-page-caption{position:absolute;left:26%;top:5%;width:22%;max-height:67%;margin:0;font-size:1.9cqw;line-height:1.5;white-space:pre-wrap;overflow:hidden;cursor:text}
.book-layout-panoramaFour .photo-frame-slot:nth-child(1){left:3%;top:51%;width:23%;height:43%}
.book-layout-panoramaFour .photo-frame-slot:nth-child(2){left:26.7%;top:51%;width:23%;height:43%}
.book-layout-panoramaFour .photo-frame-slot:nth-child(3){left:50.3%;top:51%;width:23%;height:43%}
.book-layout-panoramaFour .photo-frame-slot:nth-child(4){left:74%;top:51%;width:23%;height:43%}
.page.book-layout-panoramaFour .book-page-caption{position:absolute;left:50.3%;top:5%;width:23%;max-height:40%;margin:0;font-size:1.9cqw;line-height:1.5;white-space:pre-wrap;overflow:hidden;cursor:text}
.page.book-layout-portraitStory .book-page-caption.is-placeholder,.page.book-layout-panoramaFour .book-page-caption.is-placeholder{opacity:.45}
.page.book-layout-portraitStory .page-month,.page.book-layout-panoramaFour .page-month{left:2.4%;top:4%;max-width:20%;font-size:1.28cqw}
.page.book-layout-portraitStory .page-number,.page.book-layout-panoramaFour .page-number{left:3%;bottom:2%;font-size:1.6cqw}
.book-layout-portraitStory .add-page-photo,.book-layout-panoramaFour .add-page-photo{position:absolute;inset:20%;width:60%;height:60%}
.thumbnail-paper.book-layout-portraitStory,.thumbnail-paper.book-layout-panoramaFour{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-portraitStory .thumbnail-caption{position:absolute;left:26%;top:5%;width:22%;font-size:2px}
.thumbnail-paper.book-layout-panoramaFour .thumbnail-caption{position:absolute;left:50.3%;top:5%;width:23%;font-size:2px}
.mini-portraitStory,.mini-panoramaFour{position:relative;display:block;overflow:hidden}
.mini-portraitStory i,.mini-panoramaFour i{position:absolute;min-height:0;background:#111}
.mini-portraitStory i:first-child{left:50%;top:5%;width:47%;height:69%}
.mini-panoramaFour i:nth-child(1){left:3%;top:51%;width:23%;height:43%}
.mini-panoramaFour i:nth-child(2){left:26.7%;top:51%;width:23%;height:43%}
.mini-panoramaFour i:nth-child(3){left:50.3%;top:51%;width:23%;height:43%}
.mini-panoramaFour i:nth-child(4){left:74%;top:51%;width:23%;height:43%}
.mini-portraitStory::after,.mini-panoramaFour::after{content:'';position:absolute;background:repeating-linear-gradient(#777 0 1px,transparent 1px 4px)}
.mini-portraitStory::after{left:26%;top:5%;width:22%;height:49%}
.mini-panoramaFour::after{left:50.3%;top:5%;width:23%;height:32%}
/* Editorial references are two-page spreads, with independently editable halves. */
.book-layout-journal .photo-frame-slot:nth-child(1){left:26%;top:10%;width:72%;height:28%}
.book-layout-journal .photo-frame-slot:nth-child(2){left:0;top:54%;width:60%;height:39%}
.page.book-layout-journal .book-page-caption{left:63%;width:35%;font-size:2.5cqw}
.page.book-layout-horizon .photo-frame-slot:first-child{left:52%;top:51%;width:46%;height:42%}
.page.book-layout-horizon .book-page-caption{left:52%;width:44%;font-size:2.5cqw}
.page.book-layout-magazine .photo-frame-slot:first-child{left:0;width:100%;height:100%}
.page.book-layout-magazine .book-page-caption{display:none}
.page.book-layout-portraitStory .book-page-caption{left:52%;width:44%;font-size:2.5cqw}
.page.book-layout-portraitStory .add-page-photo{display:none}
.page.book-layout-panoramaFour .photo-frame-slot:nth-child(1){left:5%;width:46%}
.page.book-layout-panoramaFour .photo-frame-slot:nth-child(2){left:53%;width:46%}
.page.book-layout-panoramaFour .book-page-caption{display:none}
.page[class*='Right']{padding:0;display:block;overflow:hidden}
[class*='Right'] .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
[class*='Right'] .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-journalRight .photo-frame-slot:first-child{left:20%;top:10%;width:75%;height:83%}
.book-layout-horizonRight .photo-frame-slot:nth-child(1){left:0;top:51%;width:47%;height:42%}
.book-layout-horizonRight .photo-frame-slot:nth-child(2){left:49%;top:51%;width:47%;height:42%}
.book-layout-portraitStoryRight .photo-frame-slot:first-child{left:0;top:5%;width:95%;height:69%}
.book-layout-panoramaFourRight .photo-frame-slot:nth-child(1){left:0;top:51%;width:47%;height:43%}
.book-layout-panoramaFourRight .photo-frame-slot:nth-child(2){left:49%;top:51%;width:47%;height:43%}
.page.book-layout-panoramaFourRight .book-page-caption{position:absolute;left:0;top:5%;width:47%;max-height:40%;font-size:2.5cqw;line-height:1.5;margin:0;cursor:text;white-space:pre-wrap;overflow:hidden}
.page.book-layout-magazineRight{background:#ecd3d5;color:#963b42}
.book-layout-magazineRight .photo-frame-slot:first-child{left:59%;top:22%;width:36%;height:34%}
.page.book-layout-magazineRight .magazine-headline{position:absolute;left:7%;top:29%;width:48%;margin:0;font-size:8cqw;font-style:italic;line-height:1.1;overflow-wrap:anywhere;max-height:40%;overflow:hidden;cursor:text}
.page.book-layout-magazineRight .book-page-caption{position:absolute;left:49%;top:77%;width:46%;max-height:18%;margin:0;font-size:2.5cqw;line-height:1.45;white-space:pre-wrap;overflow:hidden;cursor:text}
.page.book-layout-magazineRight .page-month{left:5.6%;top:4%;color:#963b42}
.page.book-layout-magazineRight .page-number{color:#963b42}
.thumbnail-paper[class*='Right']{position:relative;padding:0;overflow:hidden}
.page.book-layout-journalRight .book-page-caption,.page.book-layout-horizonRight .book-page-caption,.page.book-layout-portraitStoryRight .book-page-caption{display:none}
.thinking-orb{display:flex;align-items:center;justify-content:flex-start;height:72px;pointer-events:none}
.thinking-orb[hidden]{display:none}

/* A matte paper cover with restrained binding and a shallow page block. */
#studio .preview-area .cover.cover-mockup,.flow-card .cover.cover-mockup{
  border-radius:5px 2px 2px 5px;
  transform:rotate(-.6deg);
  box-shadow:inset 1px 0 2px #ffffff20,inset -1px -1px 1px #00000018,2px 3px 3px #25231f18,10px 15px 23px -9px #4c453e38,21px 27px 40px -18px #4c453e28;
}
.cover-mockup .cover-material{position:absolute;inset:0;border-radius:inherit;z-index:4;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23paper)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");background-size:130px 130px;mix-blend-mode:screen;opacity:.085}
.cover-mockup .cover-spine{position:absolute;inset:0 auto 0 0;width:5%;border-radius:5px 0 0 5px;z-index:5;pointer-events:none;background:linear-gradient(90deg,#00000020 0%,#ffffff20 22%,#ffffff08 43%,#00000014 64%,transparent 100%)}
.cover-mockup .cover-page-edges{position:absolute;left:3%;right:0;top:0;bottom:0;pointer-events:none;z-index:0;background:none;box-shadow:none;clip-path:none}
.cover-mockup .cover-page-edges::before{content:'';position:absolute;top:5px;bottom:1px;right:-2px;width:2px;background:linear-gradient(90deg,#c6c2b9,#e2dfd7);border-radius:0 1px 1px 0;box-shadow:1px 1px 2px #00000010}
.cover-mockup .cover-page-edges::after{content:'';position:absolute;left:1px;right:0;bottom:-3px;height:3px;background:linear-gradient(#c6c2b9 0 1px,#ece9e1 1px 2px,#d5d1c8 2px);border-radius:0 0 1px 2px;box-shadow:0 1px 2px #00000012}
#studio .preview-area .cover.mockup-softcover,.flow-card .cover.mockup-softcover{border-radius:3px 1px 1px 3px;box-shadow:1px 2px 1px #0002,8px 12px 17px -6px #4c453e35,19px 25px 35px -18px #4c453e30}
.mockup-softcover .cover-spine{width:3%;opacity:.5}
.mockup-softcover .cover-page-edges::after{height:2px;bottom:-2px}
@media(max-width:700px){#studio .preview-area .cover.cover-mockup{transform:none}}
@media(prefers-reduced-motion:reduce){.cover-mockup{transition:none}}

/* Open-book material and lighting; overlays never intercept editing gestures. */
#studio .preview-area .spread{position:relative;isolation:isolate;border-radius:2px;box-shadow:0 2px 3px #332b2418,0 14px 20px -10px #40382f38,0 27px 35px -21px #40382f45}
#book-preview .spread>.page{border-radius:2px 0 0 2px;box-shadow:none}
#book-preview .spread>.page:nth-child(2){border-radius:0 2px 2px 0}
.inner-paper-surface{position:absolute;inset:0;z-index:20;pointer-events:none;border-radius:inherit;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' filter='url(%23paper)' d='M0 0h160v160H0z'/%3E%3C/svg%3E");background-size:130px 130px;mix-blend-mode:soft-light;opacity:.16}
.inner-paper-curve{position:absolute;inset:0;z-index:21;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,#00000006 0%,transparent 5%,transparent 75%,#ffffff16 88%,#00000006 96%,#00000024 100%);box-shadow:inset 0 1px 1px #ffffff40,inset 0 -1px 1px #0000000c}
.page:nth-child(2)>.inner-paper-curve{background:linear-gradient(90deg,#00000020 0%,#00000007 3%,#ffffff16 13%,transparent 27%,transparent 94%,#00000007 100%)}
#book-preview .spread::before,#book-preview .spread::after{content:'';position:absolute;top:2px;bottom:1px;width:4px;pointer-events:none;z-index:-1;border-bottom:2px solid #c9c4ba;background:repeating-linear-gradient(90deg,#eeeae1 0 1px,#bdb7ad 1px 1.5px,#f5f1e9 1.5px 2px);box-shadow:0 3px 3px #332b2420}
#book-preview .spread::before{left:-4px;border-radius:3px 0 0 3px;transform:skewY(-1deg)}
#book-preview .spread::after{right:-4px;border-radius:0 3px 3px 0;transform:skewY(1deg)}
#book-preview.softcover-book .spread::before{left:-2px;width:2px}
#book-preview.softcover-book .spread::after{right:-2px;width:2px}
/* Keep page turns on composited layers; static material returns after landing. */
.turn-face,.turn-stationary{contain:layout paint}
.turn-face .cover-material,.turn-face .inner-paper-surface,.turn-stationary .inner-paper-surface{display:none}
.turn-face>.cover.cover-mockup{transform:none!important;box-shadow:none!important}
.turn-face .cover-page-edges{display:none}
.turning-sheet{backface-visibility:visible;transform:translateZ(0)}
.book-opening-stage{position:fixed;z-index:60;pointer-events:none;will-change:opacity,transform}
.book-opening-stage>.cover,.book-opening-stage>.spread{width:100%!important;height:100%!important;max-width:none!important;max-height:none!important;margin:0!important;aspect-ratio:auto}
.book-opening-stage>.spread{display:flex}
.book-opening-stage .page{width:50%;height:100%}
.book-opening-stage .cover-material,.book-opening-stage .inner-paper-surface{display:none}
/* Reading-view motion: a fixed gutter, shallow perspective and travelling shade. */
.page-turn-stage{perspective:2600px}
.turn-face{box-shadow:0 2px 7px #00000012}
.turn-shade{background:linear-gradient(90deg,#00000055,transparent 42%,#ffffff12);transform:translateZ(.5px)}
.turn-reverse-shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,#ffffff15,transparent 55%,#00000055);opacity:0}
.turn-cast-shadow{position:absolute;pointer-events:none;z-index:1;background:linear-gradient(90deg,#0009,transparent 80%);will-change:transform,opacity}
/* Cover faces inherit the measured sheet, never the default square card format. */
.turn-face>.designed-cover.cover{box-sizing:border-box!important;min-width:0!important;min-height:0!important;padding:0!important;aspect-ratio:auto!important}
#book-preview>.designed-cover{height:auto;aspect-ratio:var(--book-ratio);min-height:0}
/* Personal Journal: editorial typography and a centred portrait photograph. */
.cover-journal .designed-title{left:9%;top:3%;width:51%;height:19%;text-align:left;font-size:7cqw;line-height:1.04;font-weight:600;letter-spacing:-.035em}
.cover-journal .designed-subtitle{left:auto;right:5%;top:4%;width:27%;height:17%;font-size:2.5cqw;letter-spacing:0;text-align:right;line-height:1.25}
.cover-journal .designed-pictures{left:29%;top:29%;width:42%;height:45%;padding:0;border:0}
.cover-journal .designed-names{left:9%;bottom:3%;width:45%;height:7%;text-align:left;font-size:3.4cqw;line-height:1.15}
.cover-journal .designed-year{left:auto;right:5%;bottom:3%;width:36%;height:7%;text-align:right;font-size:3.4cqw;letter-spacing:0;line-height:1.15}
.designed-cover .cover-inline-text{cursor:text;outline:none;border-radius:2px;min-height:1.2em}
.designed-cover .cover-inline-text:hover{outline:1px dashed #8888;outline-offset:3px}
.designed-cover .cover-inline-text:focus{outline:1px solid #888b;outline-offset:4px;background:#ffffff0a;z-index:8}
.cover-inline-text:empty::before{content:attr(data-placeholder);opacity:0}
.cover-inline-text:empty:hover::before,.cover-inline-text:empty:focus::before{opacity:.4}
.designed-cover .cover-inline-text.is-text-selected{outline:1px solid #7463d5;outline-offset:3px;z-index:8}
.cover-text-drag{position:absolute;z-index:18;width:26px;height:28px;min-height:0;padding:0;border:1px solid #bcb7d1;border-radius:6px;background:#fff;color:#54477c;cursor:grab;touch-action:none;transform:translate(-50%,-50%);opacity:0;pointer-events:none}
.cover-inline-text:hover+.cover-text-drag,.cover-inline-text.is-text-selected+.cover-text-drag,.cover-text-drag:hover,.cover-text-drag:focus-visible{opacity:1;pointer-events:auto}
.cover-text-drag:active,.free-text-drag:active{cursor:grabbing}
.page-turn-stage :is(.cover-text-drag,.free-text-drag){display:none!important}
.page-turn-stage :is(.cover-inline-text,.free-page-text){outline:none!important}
.placing-text .designed-cover{cursor:crosshair}
.placing-text .designed-cover>*{pointer-events:none}
@media print{.cover-text-drag{display:none!important}.designed-cover .cover-inline-text{outline:none!important}}
.exporting-proof .cover-text-drag{display:none!important}.exporting-proof .designed-cover .cover-inline-text{outline:none!important}
.cover-text-toolbar{position:fixed;right:24px;top:16px;z-index:100;display:flex;align-items:center;gap:5px;flex-wrap:wrap;max-width:min(620px,calc(100vw - 32px));padding:9px;background:#242424f5;border:1px solid #ffffff26;border-radius:18px;box-shadow:0 8px 28px #0003;color:#eee}
.cover-text-toolbar button{border:0;background:#ffffff0a;color:#eee;border-radius:20px;padding:9px 12px;font-size:12px;cursor:pointer}
.cover-text-toolbar .font-pill[aria-pressed=true]{background:#eee;color:#222}
.cover-type-size{display:flex;align-items:center;gap:8px;padding:5px 8px;font-size:15px}
.cover-type-size input{width:100px;accent-color:#eee}
@media(max-width:700px){.cover-text-toolbar{top:auto;bottom:16px;right:16px;justify-content:center}.cover-text-toolbar button{padding:8px 10px}}
.page .inner-inline-text{cursor:text;min-height:1.3em;outline:none;border-radius:2px}
.page .inner-inline-text:hover{outline:1px dashed #8886;outline-offset:3px}
.page .inner-inline-text:focus{outline:1px solid #888a;outline-offset:4px;z-index:23}
.inner-inline-text:empty::before{content:attr(data-placeholder);opacity:.35;font-size:inherit;pointer-events:none}
.page:not(.has-caption)>.book-page-caption.inner-inline-text:empty{opacity:0}
.page:hover>.book-page-caption.inner-inline-text:empty,.page>.book-page-caption.inner-inline-text:focus{opacity:1}
/* Session actions float over the cutting-mat canvas. */
#studio .preview-area .canvas-actions{position:absolute;top:14px;right:18px;z-index:35;display:flex;flex-wrap:nowrap;align-items:center;gap:6px;width:max-content;max-width:calc(100% - 28px);margin:0;padding:6px;border:1px solid #ffffff70;border-radius:16px;background:#f9f9f3e8;backdrop-filter:blur(16px);box-shadow:0 4px 18px #262a2315;color:#262a24}
#studio .canvas-actions .book-session-actions{display:contents}
#studio .canvas-actions #exit-studio,#studio .canvas-actions .secondary-button{margin:0;padding:9px 12px;border-radius:10px;background:transparent;border:0;color:#343830;font-size:11px;min-height:34px;white-space:nowrap}
#studio .canvas-actions #review-book{background:#292e27;color:#fff;margin-left:8px}
#studio .canvas-actions button:disabled{opacity:.3}
#studio .controls>.local-save-status{display:block;margin:0 0 18px;font-size:9px}
#studio .preview-area #book-preview{padding-top:65px}
@media(max-width:700px){#studio .preview-area .canvas-actions{top:8px;gap:2px;padding:4px}#studio .canvas-actions #exit-studio,#studio .canvas-actions .secondary-button{padding:7px 9px;font-size:10px}#studio .canvas-actions #review-book{margin-left:2px}}
.book-layout-mosaic .page-photo-area{display:grid;grid-template-columns:1.3fr 1fr;grid-template-rows:1fr 1fr 1fr;gap:3%}
.book-layout-mosaic .photo-frame-slot:first-child{grid-row:1 / 3}
.book-layout-mosaic .photo-frame-slot:nth-child(2){grid-column:2;grid-row:1}
.book-layout-mosaic .photo-frame-slot:nth-child(3){grid-column:2;grid-row:2 / 4}
.book-layout-mosaic .photo-frame-slot:nth-child(4){grid-column:1;grid-row:3}
.mini-mosaic{grid-template-columns:1.3fr 1fr;grid-template-rows:repeat(3,1fr)}
.mini-mosaic i:first-child{grid-row:1 / 3}.mini-mosaic i:nth-child(2){grid-column:2;grid-row:1}.mini-mosaic i:nth-child(3){grid-column:2;grid-row:2 / 4}.mini-mosaic i:nth-child(4){grid-column:1;grid-row:3}
.layout-scope{display:flex;gap:4px;background:#181818;border-radius:10px;padding:4px;margin:12px 0}
.layout-scope button{flex:1;border:0;background:transparent;color:#aaa;padding:9px;border-radius:7px}
.layout-scope button[aria-pressed=true]{background:#444;color:#fff}
.layout-choice:disabled{opacity:.35;cursor:not-allowed}

#page-thumbnails .page-thumbnail{outline:none;box-shadow:none}
#page-thumbnails .page-thumbnail:not([aria-current=page]) .thumbnail-paper,#page-thumbnails .page-thumbnail:not([aria-current=page]) .thumbnail-cover{outline-color:transparent;box-shadow:none}
#page-thumbnails .page-thumbnail[aria-current=page] .thumbnail-paper,#page-thumbnails .page-thumbnail[aria-current=page] .thumbnail-cover{outline:2px solid #fff;outline-offset:2px;box-shadow:none}
@media(max-width:700px){#studio .editor-tools button{width:25%;flex:1}}
.photo-action-toolbar{position:fixed;z-index:95;display:flex;gap:3px;padding:5px;background:#252525f5;color:#eee;border:1px solid #ffffff25;border-radius:13px;box-shadow:0 5px 20px #0003}
.photo-action-toolbar button{border:0;background:transparent;color:inherit;padding:9px 12px;border-radius:9px;white-space:nowrap}
.photo-action-toolbar button:hover{background:#ffffff18}
.photo-action-toolbar button:last-child{background:#ffffff18}
/* Selection is lightweight; detailed adjustments belong only to Crop mode. */
#cover-panel .cover-frame-settings{display:none}
body.cover-crop-mode #cover-panel .cover-frame-settings{display:block}
.is-selected-photo{outline:1px solid #a78157;outline-offset:3px}
.book-photo-edit:not(.is-cropping) .photo-move-handle,.book-photo-edit:not(.is-cropping) .photo-resize-handle{display:none}

.guided-flow.simple-import #selected-photos,.guided-flow.simple-import .photo-grid,.guided-flow.simple-import .selection-options{display:none}
.guided-flow.simple-import #suggest-book{display:none}
.reveal-spreads{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:20px}
.reveal-page{aspect-ratio:var(--page-ratio, .75);background:#f3eee4;padding:7px;display:flex;flex-direction:column;gap:4px;min-width:0}
.reveal-photo{width:100%;min-height:0;flex:1;object-fit:cover}
.exporting-proof .book-photo-edit,.exporting-proof .designed-photo{outline:none!important;border:0!important}
.exporting-proof [contenteditable]:empty::before{content:none!important}
.exporting-proof .book-page-caption:empty{visibility:hidden}
.proof-confirmation h2{font-size:26px}.proof-confirmation button{margin-right:8px}
/* Editing starts with controls, without repeated step introductions. */
#studio #step-label,#studio #step-title,#studio #step-description,#studio .controls .library-intro{display:none!important}
#studio .controls{padding-top:16px;padding-bottom:52px}
#studio .controls>#cover-panel,#studio .controls>#editor-layouts-panel,#studio .controls>#photos-panel,#studio .controls>#review-panel{margin-top:0}
#studio>.local-save-status{position:fixed;left:84px;bottom:12px;z-index:45;display:block;max-width:calc(var(--studio-sidebar,440px) - 104px);margin:0;padding:6px 9px;border-radius:8px;background:#202020ed;color:#aaa;font-size:10px;line-height:1.4;pointer-events:none}
@media(max-width:700px){#studio .controls{padding-top:12px}#studio>.local-save-status{left:10px;bottom:5px;max-width:calc(100vw - 20px);font-size:9px}#studio .page-filmstrip{padding-bottom:28px}}
.cover-photo-effects{padding:16px 0;border-top:1px solid #ffffff12;border-bottom:1px solid #ffffff12;margin:14px 0}
.cover-photo-effects h3{font-size:12px;margin:0 0 10px;font-weight:500}
.cover-photo-effects .dial-editor-control{margin:6px 0}
.cover-photo-effects .text-button{font-size:11px;color:#bbb}
/* A tactile photo stack makes the upload action feel like the start of a book. */
#photos-panel .visual-upload,.flow-card #photos-panel .visual-upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%;padding:18px 12px 20px;margin:10px 0 0;border:0;border-radius:18px;background:linear-gradient(150deg,#ffffff06,#ffffff02);color:#eee;cursor:pointer;min-height:270px;overflow:visible;box-shadow:none}
.upload-photo-stack{position:relative;display:block;width:224px;max-width:100%;height:174px;margin:0 auto 8px;pointer-events:none}
.upload-photo-stack .upload-card{position:absolute;display:block;width:94px;height:120px;object-fit:cover;border:3px solid #eeeee8;border-radius:14px;box-shadow:0 7px 15px #0005;transition:transform .22s ease;max-height:none}
.upload-card-one{left:20px;top:27px;transform:rotate(-21deg)}
.upload-card-two{left:67px;top:5px;transform:rotate(-6deg)}
.upload-card-three{left:116px;top:29px;transform:rotate(17deg)}
.upload-card-four{left:66px;top:49px;transform:rotate(-1deg)}
#photos-panel .upload-cta{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:50px;background:#eeeee8;color:#242624;font-size:13px;font-weight:500;padding:12px 20px;box-shadow:0 2px 3px #0002}
#photos-panel .upload-formats{font-size:9px;color:#999;line-height:1.6;margin-top:12px;max-width:240px;text-align:center}
.visual-upload:hover .upload-card-one{transform:translate(-3px,-3px) rotate(-24deg)}
.visual-upload:hover .upload-card-three{transform:translate(3px,-3px) rotate(20deg)}
.visual-upload:focus-visible{outline:2px solid #ddd;outline-offset:4px}
.visual-upload:disabled{opacity:.45;cursor:wait}
#photos-panel #choose-folder{display:block;margin:6px auto 12px;padding:8px 10px;background:transparent;border:0;color:#aaa;font-size:10px;text-align:center;box-shadow:none}
@media(prefers-reduced-motion:reduce){.upload-photo-stack .upload-card{transition:none}}
#studio .controls .upload-zone.visual-upload,.flow-card #photos-panel .upload-zone.visual-upload{border:0!important;outline:none;box-shadow:none;background:linear-gradient(150deg,#ffffff05,#ffffff01)}
#studio .controls .upload-zone.visual-upload:focus-visible{outline:2px solid #ddd!important;outline-offset:4px}
.photo-removal-toast{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:110;display:flex;align-items:center;gap:18px;width:max-content;max-width:calc(100vw - 24px);padding:12px 16px;border:1px solid #ffffff24;border-radius:14px;background:#292c27;color:#f4f3ec;box-shadow:0 8px 30px #0003;font-size:12px;line-height:1.4}
.photo-removal-toast button{border:0;background:none;color:inherit;font-size:12px;padding:4px;white-space:nowrap}
.photo-removal-toast button:first-of-type{text-decoration:underline;text-underline-offset:3px;font-weight:600}
.photo-removal-toast button:last-child{font-size:20px;color:#bbb}
@media(max-width:700px){.photo-removal-toast{bottom:34px;gap:10px;font-size:11px}}
/* One physical page ratio drives layout choices and the filmstrip. */
#studio .controls .layout-mini{width:100%;height:auto;min-height:0;aspect-ratio:var(--layout-preview-ratio,var(--page-ratio,1));padding:10%;gap:5%;box-sizing:border-box;flex:none}
#studio .controls .layout-mini.mini-sequence{padding-top:10%;align-items:end}
#studio .controls .layout-mini.mini-sequence i{height:55%;align-self:end}
#studio .controls .layout-mini.mini-scrapbook,#studio .controls .layout-mini.mini-journal,#studio .controls .layout-mini.mini-horizon,#studio .controls .layout-mini.mini-magazine,#studio .controls .layout-mini.mini-portraitStory,#studio .controls .layout-mini.mini-panoramaFour{padding:0}
#studio .controls .layout-mini.is-spread-preview{background-image:linear-gradient(90deg,transparent calc(50% - .5px),#aaa5 50%,transparent calc(50% + .5px));background-color:#f5f2e9}
#studio .page-thumbnail{flex:0 0 calc(var(--filmstrip-page-height,64px)*var(--page-ratio,1));width:calc(var(--filmstrip-page-height,64px)*var(--page-ratio,1));min-width:0}
#studio .thumbnail-paper,#studio .thumbnail-cover.cover{width:100%;height:var(--filmstrip-page-height,64px);aspect-ratio:var(--page-ratio,1);box-sizing:border-box}
#studio .thumbnail-paper:not([class*='scrapbook']):not([class*='journal']):not([class*='horizon']):not([class*='magazine']):not([class*='portraitStory']):not([class*='panoramaFour']){padding:8%}
@media(max-width:700px){#studio{--filmstrip-page-height:50px}}

/* Direct page text: a compact canvas toolbar and contextual formatting. */
.canvas-text-tools{position:fixed;z-index:65;left:calc(50% + 211px);bottom:calc(var(--filmstrip-height,150px) + 68px);transform:translateX(-50%);display:flex;align-items:center;gap:4px;padding:6px;background:#242424;color:#f5f5f2;border:1px solid #454545;border-radius:16px;box-shadow:0 6px 24px #0002;max-width:calc(100vw - 450px)}
.canvas-text-tools[hidden],.free-text-format[hidden]{display:none!important}
.canvas-text-tools button,.canvas-text-tools select,.canvas-text-tools input{min-height:34px;border:0;border-radius:8px;background:#343434;color:#f5f5f2;padding:6px 10px;font:12px Arimo,sans-serif}
.canvas-text-tools button[aria-pressed=true]{background:#e8e6df;color:#202020}.free-text-format{display:flex;align-items:center;gap:4px}.free-text-format input[type=number]{width:52px}.free-text-format input[type=color]{width:32px;padding:3px}.free-text-format select{max-width:100px}
.free-page-text{position:absolute;z-index:15;line-height:1.25;min-height:1.3em;overflow-wrap:anywhere;white-space:pre-wrap;outline:1px solid transparent;cursor:text}.free-page-text.is-selected{outline:1px solid #7463d5}.free-text-content{outline:none;min-height:1.3em;font:inherit;color:inherit}.free-text-content:empty:before{content:attr(data-placeholder);color:#888}.free-text-drag,.free-text-resize{position:absolute;top:50%;transform:translateY(-50%);display:grid;place-items:center;width:24px;height:26px;min-height:0;padding:0;border:1px solid #bcb7d1;border-radius:5px;background:#fff;color:#54477c;font:14px/1 var(--font-ui);touch-action:none;opacity:0;pointer-events:none}.free-text-drag{left:-30px;cursor:grab}.free-text-drag:active{cursor:grabbing}.free-text-resize{right:-12px;cursor:ew-resize}.free-page-text:is(.is-selected,:focus-within) :is(.free-text-drag,.free-text-resize){opacity:1;pointer-events:auto}.free-text-drag:focus-visible,.free-text-resize:focus-visible{outline:2px solid #7463d5;outline-offset:2px}.placing-text .page{cursor:crosshair}.placing-text .page-photo-area{pointer-events:none}
@media(max-width:700px){.canvas-text-tools{left:50%;bottom:calc(var(--filmstrip-height,150px) + 64px);max-width:calc(100vw - 16px);width:max-content;flex-wrap:wrap;justify-content:center}.free-text-format{gap:3px}.canvas-text-tools button,.canvas-text-tools select{padding:6px}.free-text-format select{max-width:77px}}
@media print{.canvas-text-tools,.free-text-drag,.free-text-resize{display:none!important}.free-page-text{outline:none!important}.free-text-content:empty:before{content:none}}
.exporting-proof .free-page-text{outline:none!important}.exporting-proof .free-text-content:empty:before{content:none}.exporting-proof :is(.free-text-drag,.free-text-resize){display:none!important}
body .free-text-content{font-family:inherit!important}.thumbnail-free-text{pointer-events:none;min-height:0}.canvas-text-tools>button{white-space:nowrap;flex-shrink:0}

/* A single quiet baseline for canvas tools and right-aligned page browsing. */
#studio .canvas-bottom-dock{position:fixed;z-index:65;left:calc(var(--studio-sidebar) + 18px);right:18px;bottom:calc(var(--filmstrip-height,150px) + 12px + env(safe-area-inset-bottom,0px));display:flex;align-items:center;justify-content:space-between;gap:12px;pointer-events:none}
#studio .canvas-bottom-dock .canvas-text-tools,#studio .canvas-bottom-dock .preview-navigation{position:relative;inset:auto;transform:none;width:max-content;max-width:none;margin:0;pointer-events:auto;border:1px solid #ffffff70;border-radius:16px;background:#f9f9f3e8;color:#262a24;box-shadow:0 4px 18px #262a2315;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:6px;min-height:46px;gap:4px;flex-shrink:0}
#studio .canvas-bottom-dock .preview-navigation{margin-left:auto;gap:6px}
#studio .canvas-bottom-dock .preview-navigation button{border:0;border-radius:10px;color:#343830;background:transparent;width:34px;height:34px}
#studio .canvas-bottom-dock .preview-navigation span{color:#343830;min-width:96px;font-size:10px}
#studio .canvas-bottom-dock .canvas-text-tools button,#studio .canvas-bottom-dock .canvas-text-tools select,#studio .canvas-bottom-dock .canvas-text-tools input{background:transparent;color:#343830;border-radius:10px;font-size:11px}
#studio .canvas-bottom-dock button:hover:not(:disabled){background:#262a2409}
#studio .canvas-bottom-dock .canvas-text-tools button[aria-pressed=true]{background:#e6e8e1;color:#262a24}
#studio .canvas-bottom-dock .canvas-text-tools select,#studio .canvas-bottom-dock .canvas-text-tools input[type=number]{background:#262a2407}
@media(max-width:1150px){#studio .canvas-bottom-dock .free-text-format{position:absolute;bottom:calc(100% + 8px);left:0;padding:6px;border:1px solid #ffffff70;border-radius:14px;background:#f9f9f3f5;box-shadow:0 4px 18px #262a2315;white-space:nowrap}}
@media(max-width:700px){#studio .canvas-bottom-dock{left:10px;right:10px;gap:8px}#studio .canvas-bottom-dock .canvas-text-tools,#studio .canvas-bottom-dock .preview-navigation{min-height:42px;padding:4px;border-radius:14px;flex-wrap:nowrap}#studio .canvas-bottom-dock .preview-navigation{gap:2px}#studio .canvas-bottom-dock .preview-navigation span{min-width:80px;font-size:9px}#studio .canvas-bottom-dock .preview-navigation button{width:30px}#studio .canvas-bottom-dock .free-text-format{max-width:calc(100vw - 20px);gap:3px}}
@media print{.canvas-bottom-dock{display:none!important}}
#studio .canvas-bottom-dock .preview-navigation button{min-height:34px;padding:0}

/* Canvas-only magnification leaves the book's print dimensions unchanged. */
#studio #book-preview{transform:scale(var(--canvas-zoom,1));transform-origin:center center}
.canvas-browsing-tools{display:flex;align-items:center;gap:8px;margin-left:auto;pointer-events:auto;flex-shrink:0}
#studio .canvas-zoom-tools{display:flex;align-items:center;gap:0;padding:6px;border:1px solid #ffffff70;border-radius:16px;background:#f9f9f3e8;color:#343830;box-shadow:0 4px 18px #262a2315;backdrop-filter:blur(16px);min-height:46px}
#studio .canvas-zoom-tools button{border:0;background:transparent;color:inherit;min-height:34px;height:34px;min-width:30px;padding:0 6px;border-radius:10px;font-size:18px;line-height:1}
#studio .canvas-zoom-tools button:nth-child(2){font-size:10px;min-width:43px}
#studio .canvas-zoom-tools button:disabled{opacity:.3;cursor:default}
@media(max-width:700px){.canvas-browsing-tools{gap:5px}#studio .canvas-zoom-tools{padding:4px;border-radius:14px;min-height:42px}#studio .canvas-zoom-tools button{min-width:26px;padding:0 4px}#studio .canvas-bottom-dock .preview-navigation span{min-width:58px}#studio .canvas-bottom-dock .preview-navigation button{width:26px}#studio .canvas-bottom-dock .canvas-text-tools{gap:2px}#studio .canvas-bottom-dock{gap:5px}}
@media(max-width:420px){#studio .canvas-zoom-tools button:nth-child(2){display:none}}
@media print{#studio #book-preview{transform:none!important}}
#studio .preview-area{overflow:clip}

/* Month labels follow the outer edge, including cloned page-turn faces. */
.page.is-right-page .page-month{left:auto;right:6.4%;text-align:right}

/* One typography interaction for cover text, captions and free text boxes. */
body .cover-text-toolbar{position:fixed;top:auto;right:auto;left:calc(var(--text-sidebar,440px) + 18px);bottom:calc(var(--filmstrip-height,150px) + 12px + env(safe-area-inset-bottom,0px));transform:none;z-index:95;display:flex;align-items:center;flex-wrap:nowrap;gap:6px;width:max-content;max-width:calc(100vw - var(--text-sidebar,440px) - 370px);padding:6px;border:1px solid #ffffff70;border-radius:16px;background:#f9f9f3f2;color:#343830;box-shadow:0 4px 18px #262a2315;backdrop-filter:blur(16px)}
body .cover-text-toolbar .typeface-choices{display:flex;gap:4px;min-width:60px;overflow-x:auto;scrollbar-width:thin;flex:1 1 auto}
body .cover-text-toolbar button{flex-shrink:0;background:transparent;border:0;color:#343830;border-radius:10px;min-height:34px;padding:6px 10px;font-size:11px;white-space:nowrap}
body .cover-text-toolbar button[aria-pressed=true]{background:#e6e8e1;color:#202520}
body .cover-text-toolbar .cover-type-size{display:flex;align-items:center;gap:6px;flex-shrink:0;color:#343830;font-size:12px}
body .cover-text-toolbar input[type=range]{width:78px;accent-color:#656c60}
body .cover-text-toolbar .free-text-format{position:static;display:flex;gap:2px;padding:0;border:0;box-shadow:none;background:none}
body .cover-text-toolbar .text-alignment-controls{display:flex;align-items:center;gap:2px;flex-shrink:0}
body .cover-text-toolbar .text-alignment-controls button{width:30px;padding:6px}
.text-alignment-controls svg{display:block;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
body .cover-text-toolbar input[type=color]{width:27px;height:30px;padding:2px;border:0;background:transparent}
body:has(.cover-text-toolbar:not([hidden])) .canvas-text-tools{visibility:hidden}
@media(max-width:1100px){body{--text-sidebar:390px}body .cover-text-toolbar{max-width:calc(100vw - var(--text-sidebar) - 36px);bottom:calc(var(--filmstrip-height,150px) + 65px + env(safe-area-inset-bottom,0px))}}
@media(max-width:700px){body{--text-sidebar:0px}body .cover-text-toolbar{left:10px;max-width:calc(100vw - 20px);gap:3px}body .cover-text-toolbar button{padding:6px}body .cover-text-toolbar input[type=range]{width:60px}}
@media(max-width:700px){body .cover-text-toolbar{flex-wrap:wrap}body .cover-text-toolbar .typeface-choices{flex-basis:100%}body .cover-text-toolbar .free-text-format{min-width:0}body .cover-text-toolbar .text-alignment-controls button{width:28px}body .cover-text-toolbar .cover-type-size{margin-right:auto}body:has(.cover-text-toolbar:not([hidden])) .canvas-browsing-tools{visibility:hidden}}

/* Travel keepsakes: full-bleed scenery, stacked prints and an editable note. */
.page.book-layout-keepsake{padding:0;display:block;overflow:hidden;background:#eee9d8}
.book-layout-keepsake .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-keepsake .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-keepsake .page-photo-area>.photo-frame-slot:nth-child(1){left:0;top:0;width:100%;height:64%;z-index:0}
.book-layout-keepsake .page-photo-area>.photo-frame-slot:nth-child(2){left:0;top:64%;width:100%;height:36%;z-index:1}
.book-layout-keepsake .page-photo-area>.photo-frame-slot:nth-child(3){left:29%;top:25%;width:49%;height:48%;padding:2.3% 2.3% 10%;background:#fffbe6;transform:rotate(-6deg);z-index:3;box-shadow:1px 3px 7px #161b2238}
.book-layout-keepsake .page-photo-area>.photo-frame-slot:nth-child(4){left:18%;top:24%;width:51%;height:47%;padding:2.3% 2.3% 10%;background:#fffbe6;transform:rotate(5deg);z-index:4;box-shadow:1px 3px 7px #161b2238}
.book-layout-keepsake .page-photo-area>.photo-frame-slot:nth-child(4)::after{content:'';position:absolute;right:4%;top:-5%;width:7%;height:28%;border:1.5px solid #857d48;border-radius:40% 40% 45% 45%;transform:rotate(-7deg);z-index:8;box-shadow:1px 0 1px #0003;pointer-events:none}
.book-layout-keepsake .page-photo-area::after{content:'';position:absolute;left:15%;top:36%;width:24%;height:18%;background:repeating-linear-gradient(0deg,transparent 0 8%,#726d5b55 8% 9%,transparent 9% 12%),#f5efde;transform:rotate(2deg);z-index:2;clip-path:polygon(2% 0,98% 0,100% 4%,98% 8%,100% 12%,98% 16%,100% 20%,98% 24%,100% 100%,0 100%);pointer-events:none}
.page.book-layout-keepsake .book-page-caption{position:absolute;left:51%;top:48%;width:34%;min-height:27%;height:auto;max-height:34%;margin:0;padding:8% 4% 4%;background:#fff0a3;background-image:radial-gradient(#766a2510 .5px,transparent .8px);background-size:3px 3px;transform:rotate(-5deg);z-index:7;color:#51472a;font-size:2.5cqw;line-height:1.35;overflow:hidden;box-shadow:1px 3px 6px #19211c25}
.page.book-layout-keepsake .book-page-caption::after{content:'';position:absolute;right:0;top:0;width:20%;aspect-ratio:1;background:linear-gradient(45deg,#e9c95e 49%,#fff6be 51%);pointer-events:none}
.page.book-layout-keepsake .page-month{z-index:9;color:#fff;text-shadow:0 1px 3px #0009}
.book-layout-keepsake .page-photo-area>.add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
#studio .thumbnail-paper.book-layout-keepsake{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-keepsake::after{content:'';position:absolute;left:51%;top:48%;width:34%;height:27%;background:#fff0a3;transform:rotate(-5deg);z-index:7;box-shadow:1px 1px 2px #0002;pointer-events:none}
.thumbnail-paper.book-layout-keepsake .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-keepsake{position:relative;display:block;padding:0;overflow:hidden;background:#ddd7c5}
.mini-keepsake i{position:absolute;background:#666f61}
.mini-keepsake i:nth-child(1){inset:0 0 36%;background:#84917b}
.mini-keepsake i:nth-child(2){left:0;top:64%;width:100%;height:36%;background:#72796c}
.mini-keepsake i:nth-child(3){left:29%;top:25%;width:49%;height:48%;border:4px solid #fffbe6;border-bottom-width:12px;transform:rotate(-6deg);z-index:3}
.mini-keepsake i:nth-child(4){left:18%;top:24%;width:51%;height:47%;border:4px solid #fffbe6;border-bottom-width:12px;transform:rotate(5deg);z-index:4;background:#3c493d}
.mini-keepsake::after{content:'';position:absolute;left:51%;top:48%;width:34%;height:27%;background:#fff0a3;transform:rotate(-5deg);z-index:7}

/* Family moments: overlapping paper prints above a torn photograph. */
.page.book-layout-familyCollage{display:block;padding:0;overflow:hidden;background-color:#f6f4ec;background-image:radial-gradient(#746c5910 .6px,transparent .9px);background-size:3px 3px;color:#292b24}
.book-layout-familyCollage .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-familyCollage .page-photo-area>.photo-frame-slot{position:absolute;display:grid;grid-row:auto;grid-column:auto}
.book-layout-familyCollage .page-photo-area>.photo-frame-slot:nth-child(1){left:8%;top:6%;width:55%;height:43%;padding:2.7%;background:#fffdf4;transform:rotate(.6deg);z-index:2;box-shadow:0 -1px 1px #262a2455,1px 2px 3px #262a2425}
.book-layout-familyCollage .page-photo-area>.photo-frame-slot:nth-child(2){left:55%;top:30%;width:37%;height:29%;padding:2%;background:#fffdf4;transform:rotate(.5deg);z-index:4;box-shadow:0 -1px 1px #262a2455,1px 2px 3px #262a2420}
.book-layout-familyCollage .page-photo-area>.photo-frame-slot:nth-child(2)::after{content:'';position:absolute;right:3%;top:-6%;width:7%;height:29%;border:1.3px solid #a8a89b;border-radius:45%;transform:rotate(-18deg);box-shadow:1px 0 1px #fff;z-index:8;pointer-events:none}
.book-layout-familyCollage .page-photo-area>.photo-frame-slot:nth-child(3){left:0;top:69%;width:100%;height:31%;z-index:1;clip-path:polygon(0 10%,3% 13%,6% 9%,9% 10%,12% 3%,14% 1%,17% 9%,20% 13%,24% 14%,27% 12%,30% 16%,34% 16%,38% 15%,41% 9%,44% 9%,47% 13%,51% 12%,54% 10%,57% 11%,60% 13%,64% 11%,68% 15%,72% 10%,76% 11%,79% 6%,82% 8%,86% 2%,89% 3%,92% 0,96% 3%,100% 4%,100% 100%,0 100%)}
.page.book-layout-familyCollage .book-page-caption{position:absolute;left:10%;top:54%;width:38%;max-height:15%;height:auto;padding:0;margin:0;z-index:5;color:#292b24;font-size:2.3cqw;line-height:1.45;text-align:left;overflow:hidden}
.page.book-layout-familyCollage .magazine-headline{position:absolute;left:70%;top:16%;width:25%;max-height:13%;margin:0;padding:0;transform:rotate(6deg);z-index:5;font-size:4.2cqw;line-height:1.15;font-style:italic;color:#292b24;text-align:center}
.page.book-layout-familyCollage .page-month{z-index:6;font-size:1.6cqw;color:#626458}
.book-layout-familyCollage .page-photo-area>.add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
#studio .thumbnail-paper.book-layout-familyCollage{position:relative;padding:0;overflow:hidden;background:#f6f4ec}
.thumbnail-paper.book-layout-familyCollage .thumbnail-caption{position:absolute;left:10%;top:54%;width:38%;max-height:15%;font-size:2px;padding:0;z-index:5;color:#292b24}
#studio .controls .layout-mini.mini-familyCollage{position:relative;display:block;padding:0;overflow:hidden;background:#f6f4ec}
.mini-familyCollage i{position:absolute;background:#53634d}
.mini-familyCollage i:nth-child(1){left:8%;top:6%;width:55%;height:43%;border:4px solid #fffdf4;transform:rotate(.6deg);box-shadow:0 -1px 1px #0005}
.mini-familyCollage i:nth-child(2){left:55%;top:30%;width:37%;height:29%;border:3px solid #fffdf4;z-index:3;transform:rotate(.5deg);box-shadow:0 -1px 1px #0005}
.mini-familyCollage i:nth-child(3){left:0;top:69%;width:100%;height:31%;clip-path:polygon(0 10%,10% 5%,14% 0,20% 10%,34% 16%,44% 9%,57% 11%,68% 15%,79% 6%,89% 3%,92% 0,100% 4%,100% 100%,0 100%)}
.mini-familyCollage::before{content:'';position:absolute;left:71%;top:18%;width:21%;height:1px;background:#68665a;transform:rotate(8deg)}
.mini-familyCollage::after{content:'';position:absolute;left:10%;top:55%;width:34%;height:11%;background:repeating-linear-gradient(transparent 0 22%,#68665a66 22% 26%)}

/* Photo column & full bleed: one composed spread, three details and a hero. */
.page.book-layout-gardenStory,.page.book-layout-gardenStoryRight{display:block;padding:0;overflow:hidden;background:#f7f4ed}
.book-layout-gardenStory .page-photo-area,.book-layout-gardenStoryRight .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-gardenStory .photo-frame-slot,.book-layout-gardenStoryRight .photo-frame-slot{position:absolute;display:grid;grid-row:auto;grid-column:auto}
.book-layout-gardenStory .photo-frame-slot:nth-child(1){left:39%;top:14%;width:24%;height:22%}
.book-layout-gardenStory .photo-frame-slot:nth-child(2){left:39%;top:38%;width:24%;height:22%;border:2px solid #b63817}
.book-layout-gardenStory .photo-frame-slot:nth-child(3){left:39%;top:62%;width:24%;height:22%}
.book-layout-gardenStory .page-photo-area::before{content:'';position:absolute;left:36.5%;top:12%;width:5.5%;aspect-ratio:1;background:#c7370c;border-radius:50%;z-index:5;pointer-events:none}
.book-layout-gardenStoryRight .photo-frame-slot:first-child{inset:0;width:100%;height:100%}
.page.book-layout-gardenStory .magazine-headline{position:absolute;left:5%;top:25%;width:auto;height:50%;max-height:none;margin:0;padding:0;writing-mode:vertical-rl;transform:rotate(180deg);text-align:center;font-size:2.9cqw;font-weight:400;color:#a13c24;line-height:1.2;z-index:6;overflow:hidden}
.page.book-layout-gardenStory .book-page-caption{position:absolute;left:auto;right:5%;top:25%;width:auto;height:50%;max-height:none;margin:0;padding:0;writing-mode:vertical-rl;text-align:center;font-size:2.9cqw;color:#a13c24;line-height:1.2;z-index:6;overflow:hidden}
.page.book-layout-gardenStoryRight .book-page-caption{position:absolute;left:8%;bottom:6%;top:auto;width:84%;height:auto;max-height:18%;margin:0;color:#fff;text-shadow:0 1px 3px #0009;z-index:6;font-size:2.4cqw}
.page.book-layout-gardenStoryRight .page-month{z-index:6;color:white;text-shadow:0 1px 3px #0009}
.book-layout-gardenStory .add-page-photo,.book-layout-gardenStoryRight .add-page-photo{position:absolute;inset:20%;width:60%;height:60%}
#studio .thumbnail-paper.book-layout-gardenStory,#studio .thumbnail-paper.book-layout-gardenStoryRight{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-gardenStory .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-gardenStory{position:relative;display:block;padding:0;background:#f7f4ed;overflow:hidden}
.mini-gardenStory i{position:absolute;background:#44533e}
.mini-gardenStory i:nth-child(1){left:19.5%;top:14%;width:12%;height:22%}
.mini-gardenStory i:nth-child(2){left:19.5%;top:38%;width:12%;height:22%;border:1px solid #b63817}
.mini-gardenStory i:nth-child(3){left:19.5%;top:62%;width:12%;height:22%}
.mini-gardenStory i:nth-child(4){left:50%;top:0;width:50%;height:100%}
.mini-gardenStory::before{content:'';position:absolute;left:18.25%;top:12%;width:2.75%;aspect-ratio:1;background:#c7370c;border-radius:50%;z-index:5}
.mini-gardenStory::after{content:'';position:absolute;left:46%;top:37%;width:1px;height:27%;background:#a13c24}

/* Postcard: two editable photos, a paper card and direct-edit travel notes. */
.page.book-layout-postcard{display:block;position:relative;padding:0;overflow:hidden;background:#d9dfd4}
.book-layout-postcard .page-photo-area{position:absolute;inset:0;width:100%;height:100%;display:block;padding:0;z-index:1;pointer-events:none}
.book-layout-postcard .photo-frame-slot{position:absolute;display:grid;grid-row:auto;grid-column:auto;pointer-events:auto}
.book-layout-postcard .photo-frame-slot:first-child{inset:0;width:100%;height:100%;z-index:0}
.book-layout-postcard .photo-frame-slot:nth-child(2){left:25%;top:50%;width:64%;height:35%;padding:2.6%;background:#fffdf5;transform:rotate(2deg);z-index:5;box-shadow:1px 3px 6px #14291f30;clip-path:polygon(0 2%,2% 0,4% 2%,6% 0,8% 2%,10% 0,12% 2%,14% 0,16% 2%,18% 0,20% 2%,22% 0,24% 2%,26% 0,28% 2%,30% 0,32% 2%,34% 0,36% 2%,38% 0,40% 2%,42% 0,44% 2%,46% 0,48% 2%,50% 0,52% 2%,54% 0,56% 2%,58% 0,60% 2%,62% 0,64% 2%,66% 0,68% 2%,70% 0,72% 2%,74% 0,76% 2%,78% 0,80% 2%,82% 0,84% 2%,86% 0,88% 2%,90% 0,92% 2%,94% 0,96% 2%,98% 0,100% 2%,98% 5%,100% 10%,98% 15%,100% 20%,98% 25%,100% 30%,98% 35%,100% 40%,98% 45%,100% 50%,98% 55%,100% 60%,98% 65%,100% 70%,98% 75%,100% 80%,98% 85%,100% 90%,98% 95%,100% 98%,96% 100%,92% 98%,88% 100%,84% 98%,80% 100%,76% 98%,72% 100%,68% 98%,64% 100%,60% 98%,56% 100%,52% 98%,48% 100%,44% 98%,40% 100%,36% 98%,32% 100%,28% 98%,24% 100%,20% 98%,16% 100%,12% 98%,8% 100%,4% 98%,0 100%,2% 95%,0 90%,2% 85%,0 80%,2% 75%,0 70%,2% 65%,0 60%,2% 55%,0 50%,2% 45%,0 40%,2% 35%,0 30%,2% 25%,0 20%,2% 15%,0 10%,2% 5%)}
.page.book-layout-postcard .postcard-paper{position:absolute;left:10%;top:17%;width:72%;height:38%;transform:rotate(-4deg);z-index:2;background:#fbf8ef;background-image:radial-gradient(#615b4b12 .6px,transparent .9px);background-size:3px 3px;box-shadow:1px 2px 5px #14291f30;pointer-events:none;border:6px solid #fbf8ef;outline:1px solid #426b5e;outline-offset:-11px}
.postcard-paper::before{content:'';position:absolute;left:46%;top:23%;bottom:8%;width:1px;background:#8e8a7b66}
.postcard-paper::after{content:'';position:absolute;left:52%;right:6%;bottom:14%;height:17%;background:repeating-linear-gradient(transparent 0 30%,#8e8a7b66 30% 33%)}
.postcard-label{position:absolute;top:7%;left:0;width:100%;text-align:center;font-size:2cqw;letter-spacing:.2em;color:#293e35}
.postcard-postmark{position:absolute;right:8%;top:10%;width:10%;height:20%;border:1px dashed #8e8a7b80}
.postcard-postmark::before{content:'';position:absolute;right:125%;top:12%;width:120%;aspect-ratio:1;border:3px double #8e8a7b80;border-radius:50%}
.page.book-layout-postcard .magazine-headline{position:absolute;left:14%;top:29%;width:28%;max-height:17%;margin:0;padding:0;transform:rotate(-4deg);font-size:4.1cqw;font-weight:400;line-height:1.2;color:#204b3e;z-index:4;overflow:hidden}
.page.book-layout-postcard .book-page-caption{position:absolute;left:48%;top:30%;width:29%;height:auto;max-height:17%;margin:0;padding:0;transform:rotate(-4deg);font-size:2.7cqw;line-height:1.35;text-align:left;color:#27594b;z-index:4;overflow:hidden}
.page.book-layout-postcard .page-month{z-index:6;color:#fff;text-shadow:0 1px 3px #0009}
.book-layout-postcard .add-page-photo{position:absolute;inset:15%;width:70%;height:70%;pointer-events:auto}
#studio .thumbnail-paper.book-layout-postcard{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-postcard::after{content:'';position:absolute;left:10%;top:17%;width:72%;height:38%;transform:rotate(-4deg);z-index:2;background:#fbf8ef;border:2px double #426b5e;pointer-events:none}
.thumbnail-paper.book-layout-postcard .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-postcard{position:relative;display:block;padding:0;overflow:hidden;background:#d5dfd4}
.mini-postcard i{position:absolute;background:#546e60}
.mini-postcard i:first-child{inset:0}
.mini-postcard i:nth-child(2){left:25%;top:50%;width:64%;height:35%;border:4px dotted #fffdf5;background:#344e41;transform:rotate(2deg);z-index:5}
.mini-postcard::after{content:'';position:absolute;left:10%;top:17%;width:72%;height:38%;transform:rotate(-4deg);background:linear-gradient(90deg,transparent 46%,#8e8a7b66 46% 47%,transparent 47%),#fbf8ef;border:3px double #426b5e;z-index:2}
.book-layout-postcard .page-photo-area{z-index:auto}

/* Travel note: a tall postal print and a clipped sheet of notebook paper. */
.page.book-layout-travelNote{display:block;position:relative;padding:0;overflow:hidden;background:#454a40}
.book-layout-travelNote .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;pointer-events:none}
.book-layout-travelNote .photo-frame-slot{position:absolute;display:grid;grid-row:auto;grid-column:auto;pointer-events:auto}
.book-layout-travelNote .photo-frame-slot:first-child{inset:0;width:100%;height:100%;z-index:0}
.book-layout-travelNote .photo-frame-slot:nth-child(2){left:12%;top:23%;width:59%;height:68%;padding:3%;background:#fffbe8;z-index:4;transform:rotate(-.5deg);box-shadow:1px 3px 6px #17221955;border:3px dotted #fffbe8;outline:3px dotted #fffbe8;outline-offset:0}
.page.book-layout-travelNote .postcard-paper{position:absolute;left:34%;top:19%;width:53%;height:68%;transform:rotate(6deg);z-index:2;background-color:#f3efdf;background-image:radial-gradient(#71664c12 .6px,transparent .9px);background-size:3px 3px;box-shadow:2px 3px 6px #17221935;pointer-events:none}
.book-layout-travelNote .postcard-paper::before{content:'';position:absolute;right:15%;top:13%;width:1px;height:64%;background:#91877555}
.book-layout-travelNote .postcard-paper::after{content:'';position:absolute;right:8%;bottom:10%;width:14%;height:16%;border:3px double #8e8976;background:repeating-linear-gradient(45deg,#73807833 0 2px,transparent 2px 4px)}
.book-layout-travelNote .postcard-label{position:absolute;left:auto;right:8%;top:18%;width:auto;font-size:3.3cqw;letter-spacing:.25em;color:#35382e;writing-mode:vertical-rl}
.book-layout-travelNote .postcard-postmark{position:absolute;right:7%;top:63%;width:14%;height:13%;border:3px double #8e8976;border-radius:0;background:repeating-linear-gradient(-45deg,#77749633 0 2px,transparent 2px 4px)}
.book-layout-travelNote .postcard-postmark::before{display:none}
.page.book-layout-travelNote .book-page-caption{position:absolute;left:20%;top:20%;width:51%;height:auto;min-height:16%;max-height:25%;margin:0;padding:5% 4% 3% 8%;background-color:#f7f3e5;background-image:repeating-linear-gradient(0deg,transparent 0 17px,#89826a26 17px 18px);transform:rotate(-7deg);color:#35392f;font-size:3.6cqw;line-height:1.45;text-align:left;z-index:7;overflow:visible;box-shadow:1px 2px 4px #17221935}
.page.book-layout-travelNote .book-page-caption::before{content:'';position:absolute;left:3%;top:15%;width:4%;height:70%;background:radial-gradient(ellipse at center,#676450bb 0 45%,transparent 50%) center top/100% 25% repeat-y;pointer-events:none}
.page.book-layout-travelNote .book-page-caption::after{content:'';position:absolute;right:4%;top:-7%;width:7%;height:75%;border:2px solid #b8b9a9;border-radius:40%;transform:rotate(8deg);box-shadow:1px 0 1px #3337;pointer-events:none}
.page.book-layout-travelNote .page-month{z-index:8;color:#fff;text-shadow:0 1px 3px #0009}
.book-layout-travelNote .add-page-photo{position:absolute;inset:15%;width:70%;height:70%;pointer-events:auto}
#studio .thumbnail-paper.book-layout-travelNote{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-travelNote::after{content:'';position:absolute;left:20%;top:20%;width:51%;height:18%;transform:rotate(-7deg);background:#f7f3e5;z-index:7;pointer-events:none}
.thumbnail-paper.book-layout-travelNote .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-travelNote{position:relative;display:block;padding:0;overflow:hidden;background:#78816e}
.mini-travelNote i{position:absolute;background:#495244}
.mini-travelNote i:first-child{inset:0}
.mini-travelNote i:nth-child(2){left:12%;top:23%;width:59%;height:68%;border:4px dotted #fffbe8;background:#727760;z-index:4}
.mini-travelNote::before{content:'';position:absolute;left:34%;top:19%;width:53%;height:68%;transform:rotate(6deg);background:#e9e3d1;z-index:2}
.mini-travelNote::after{content:'';position:absolute;left:20%;top:20%;width:51%;height:18%;transform:rotate(-7deg);background:repeating-linear-gradient(0deg,transparent 0 5px,#89826a26 5px 6px),#f7f3e5;z-index:7}

.book-layout-travelNote .photo-frame-slot:nth-child(2){clip-path:polygon(0 2%,2% 0,4% 2%,6% 0,8% 2%,10% 0,12% 2%,14% 0,16% 2%,18% 0,20% 2%,22% 0,24% 2%,26% 0,28% 2%,30% 0,32% 2%,34% 0,36% 2%,38% 0,40% 2%,42% 0,44% 2%,46% 0,48% 2%,50% 0,52% 2%,54% 0,56% 2%,58% 0,60% 2%,62% 0,64% 2%,66% 0,68% 2%,70% 0,72% 2%,74% 0,76% 2%,78% 0,80% 2%,82% 0,84% 2%,86% 0,88% 2%,90% 0,92% 2%,94% 0,96% 2%,98% 0,100% 2%,98% 5%,100% 10%,98% 15%,100% 20%,98% 25%,100% 30%,98% 35%,100% 40%,98% 45%,100% 50%,98% 55%,100% 60%,98% 65%,100% 70%,98% 75%,100% 80%,98% 85%,100% 90%,98% 95%,100% 98%,96% 100%,92% 98%,88% 100%,84% 98%,80% 100%,76% 98%,72% 100%,68% 98%,64% 100%,60% 98%,56% 100%,52% 98%,48% 100%,44% 98%,40% 100%,36% 98%,32% 100%,28% 98%,24% 100%,20% 98%,16% 100%,12% 98%,8% 100%,4% 98%,0 100%,2% 95%,0 90%,2% 85%,0 80%,2% 75%,0 70%,2% 65%,0 60%,2% 55%,0 50%,2% 45%,0 40%,2% 35%,0 30%,2% 25%,0 20%,2% 15%,0 10%,2% 5%)}
.page.book-layout-travelNote .book-page-caption{overflow:hidden}
.page.book-layout-travelNote .book-page-caption::after{display:none}
.book-layout-travelNote .page-photo-area::after{content:'';position:absolute;left:65%;top:17%;width:4%;height:17%;border:2px solid #b8b9a9;border-radius:40%;transform:rotate(1deg);box-shadow:1px 0 1px #3337;z-index:8;pointer-events:none}
.book-layout-travelNote .photo-frame-slot:nth-child(2)::after{content:'';position:absolute;left:22%;bottom:8%;width:75%;height:10%;border-top:2px solid #eee9db55;border-bottom:2px solid #eee9db55;border-radius:50%;transform:rotate(-12deg);pointer-events:none;z-index:6}

/* Stamped memory: an oversized print crossing a full-height scenery strip. */
.page.book-layout-mountainStamp{position:relative;display:block;padding:0;overflow:hidden;background:#efeeea}
.book-layout-mountainStamp .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-mountainStamp .photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-mountainStamp .photo-frame-slot:first-child{left:68%;top:0;width:32%;height:100%;z-index:0}
.book-layout-mountainStamp .photo-frame-slot:nth-child(2){left:12%;top:13%;width:76%;height:75%;padding:4.4%;background-color:#f7f5e8;background-image:radial-gradient(#736a4110 .6px,transparent 1px);background-size:3px 3px;z-index:3;box-shadow:1px 3px 7px #292a2422;isolation:isolate}
.book-layout-mountainStamp .photo-frame-slot:nth-child(2)::after{content:'';position:absolute;inset:0;pointer-events:none;z-index:5;box-shadow:inset 0 0 4px #827b5725}
.page.book-layout-mountainStamp .book-page-caption{position:absolute;left:7%;bottom:3.5%;top:auto;width:58%;height:auto;max-height:7%;padding:0;margin:0;color:#252823;font-size:4.3cqw;font-style:italic;line-height:1.2;z-index:5;text-align:left;overflow:hidden}
.book-layout-mountainStamp .add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
.page.book-layout-mountainStamp .page-month{z-index:5;color:#41483c}
#studio .thumbnail-paper.book-layout-mountainStamp{position:relative;padding:0;overflow:hidden;background:#efeeea}
.thumbnail-paper.book-layout-mountainStamp .thumbnail-caption{position:absolute;left:7%;bottom:3.5%;width:58%;font-size:2px;color:#252823;z-index:5;padding:0}
#studio .controls .layout-mini.mini-mountainStamp{position:relative;display:block;padding:0;overflow:hidden;background:#efeeea}
.mini-mountainStamp i{position:absolute;background:#596a55}
.mini-mountainStamp i:first-child{left:68%;top:0;width:32%;height:100%}
.mini-mountainStamp i:nth-child(2){left:12%;top:13%;width:76%;height:75%;border:5px dotted #f7f5e8;background:#818b6e;z-index:3}
.mini-mountainStamp::after{content:'';position:absolute;left:7%;bottom:5%;width:44%;height:1px;background:#555b4a;transform:rotate(-3deg)}


@supports not (mask: linear-gradient(#000,#000)){.book-layout-mountainStamp .photo-frame-slot:nth-child(2){clip-path:polygon(0 2%,2% 0,4% 2%,6% 0,8% 2%,10% 0,12% 2%,14% 0,16% 2%,18% 0,20% 2%,22% 0,24% 2%,26% 0,28% 2%,30% 0,32% 2%,34% 0,36% 2%,38% 0,40% 2%,42% 0,44% 2%,46% 0,48% 2%,50% 0,52% 2%,54% 0,56% 2%,58% 0,60% 2%,62% 0,64% 2%,66% 0,68% 2%,70% 0,72% 2%,74% 0,76% 2%,78% 0,80% 2%,82% 0,84% 2%,86% 0,88% 2%,90% 0,92% 2%,94% 0,96% 2%,98% 0,100% 2%,98% 5%,100% 10%,98% 15%,100% 20%,98% 25%,100% 30%,98% 35%,100% 40%,98% 45%,100% 50%,98% 55%,100% 60%,98% 65%,100% 70%,98% 75%,100% 80%,98% 85%,100% 90%,98% 95%,100% 98%,96% 100%,92% 98%,88% 100%,84% 98%,80% 100%,76% 98%,72% 100%,68% 98%,64% 100%,60% 98%,56% 100%,52% 98%,48% 100%,44% 98%,40% 100%,36% 98%,32% 100%,28% 98%,24% 100%,20% 98%,16% 100%,12% 98%,8% 100%,4% 98%,0 100%,2% 95%,0 90%,2% 85%,0 80%,2% 75%,0 70%,2% 65%,0 60%,2% 55%,0 50%,2% 45%,0 40%,2% 35%,0 30%,2% 25%,0 20%,2% 15%,0 10%,2% 5%)}}
.book-layout-mountainStamp .photo-frame-slot:nth-child(2){
  mask:radial-gradient(circle at 50% 0,transparent 2px,#000 2.7px) 0 0/12px 100% repeat-x,radial-gradient(circle at 50% 100%,transparent 2px,#000 2.7px) 0 0/12px 100% repeat-x,radial-gradient(circle at 0 50%,transparent 2px,#000 2.7px) 0 0/100% 12px repeat-y,radial-gradient(circle at 100% 50%,transparent 2px,#000 2.7px) 0 0/100% 12px repeat-y;
  mask-composite:intersect;
}

/* Empty frames keep the chosen composition visible and can be filled later. */
.empty-photo-frame{background:#e1e3dc}
.empty-photo-frame .add-frame-photo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;min-width:0;min-height:0;padding:4px;border:1px dashed #69736460;border-radius:0;background:#e7e9e1eb;color:#58614f;font-size:2.4cqw;line-height:1.2;cursor:pointer;pointer-events:auto}
.empty-photo-frame .add-frame-photo:hover{background:#d9dfd0;color:#283324}
.thumbnail-empty-frame{background:#d7dcd0;outline:1px dashed #8d9584;outline-offset:-1px}
.book-layout-postcard .empty-photo-frame,.book-layout-travelNote .empty-photo-frame{pointer-events:auto}

/* Picture within a picture: a quiet, borderless two-image composition. */
.page.book-layout-insetMoment{position:relative;display:block;padding:0;overflow:hidden;background:var(--page-bg,#f4f2eb)}
.book-layout-insetMoment .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-insetMoment .photo-frame-slot{position:absolute;display:grid;grid-row:auto;grid-column:auto}
.book-layout-insetMoment .photo-frame-slot:first-child{inset:0;width:100%;height:100%;z-index:0}
.book-layout-insetMoment .photo-frame-slot:nth-child(2){left:19%;top:41%;width:63%;height:20%;padding:0;border:0;background:transparent;z-index:3;box-shadow:none}
.page.book-layout-insetMoment .book-page-caption{position:absolute;left:9%;bottom:5%;top:auto;width:82%;height:auto;max-height:12%;margin:0;padding:0;color:#fff;text-shadow:0 1px 4px #0008;font-size:2.6cqw;line-height:1.3;text-align:center;z-index:5;overflow:hidden}
.page.book-layout-insetMoment .page-month{z-index:5;color:#fff;text-shadow:0 1px 4px #0008}
.book-layout-insetMoment .add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
#studio .thumbnail-paper.book-layout-insetMoment{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-insetMoment .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-insetMoment{position:relative;display:block;padding:0;overflow:hidden;background:#a8b29e}
.mini-insetMoment i{position:absolute;background:#6b7d60}
.mini-insetMoment i:first-child{inset:0}
.mini-insetMoment i:nth-child(2){left:19%;top:41%;width:63%;height:20%;background:#d0bea5;z-index:3}

/* Three photo bands: equal horizontal photographs, edge to edge. */
.page.book-layout-horizontalTrio{position:relative;display:block;padding:0;overflow:hidden;background:var(--page-bg,#f4f2eb)}
.book-layout-horizontalTrio .page-photo-area{position:absolute;inset:0;display:grid;width:100%;height:100%;padding:0;gap:0;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr))}
.book-layout-horizontalTrio .page-photo-area>.photo-frame-slot{position:relative;inset:auto;width:100%;height:100%;min-height:0;padding:0;border:0;margin:0;grid-column:1;grid-row:auto;overflow:hidden}
.page.book-layout-horizontalTrio .book-page-caption{position:absolute;left:8%;bottom:4%;top:auto;width:84%;height:auto;max-height:10%;margin:0;padding:0;font-size:2.6cqw;line-height:1.3;text-align:center;color:#fff;text-shadow:0 1px 4px #0009;z-index:5;overflow:hidden}
.page.book-layout-horizontalTrio .page-month{z-index:5;color:#fff;text-shadow:0 1px 4px #0009}
#studio .thumbnail-paper.book-layout-horizontalTrio{position:relative;padding:0;overflow:hidden}
.thumbnail-paper.book-layout-horizontalTrio .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-horizontalTrio{display:grid;padding:0;gap:0;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(3,minmax(0,1fr));overflow:hidden}
.mini-horizontalTrio i:nth-child(1){background:#778668}
.mini-horizontalTrio i:nth-child(2){background:#353c33}
.mini-horizontalTrio i:nth-child(3){background:#a5af95}

/* Editorial duo: a restrained inset with two labels above a full-width photo. */
.page.book-layout-editorialDuo{position:relative;display:block;padding:0;overflow:hidden;background-color:#f1f0e9;background-image:radial-gradient(#6c695611 .6px,transparent .9px);background-size:3px 3px}
.book-layout-editorialDuo .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-editorialDuo .photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto}
.book-layout-editorialDuo .photo-frame-slot:first-child{left:11%;top:10.5%;width:78%;height:32.5%;padding:0;border:0}
.book-layout-editorialDuo .photo-frame-slot:nth-child(2){left:0;top:53.5%;width:100%;height:46.5%;padding:0;border:0}
.page.book-layout-editorialDuo .magazine-headline{position:absolute;left:11%;top:45%;width:50%;max-height:5.5%;height:auto;margin:0;padding:0;font-size:2cqw;font-weight:400;line-height:1.25;color:#282a24;text-align:left;z-index:5;overflow:hidden}
.page.book-layout-editorialDuo .book-page-caption{position:absolute;left:auto;right:11%;top:45%;width:28%;height:auto;max-height:5.5%;margin:0;padding:0;font-size:2cqw;line-height:1.25;text-align:right;color:#282a24;z-index:5;overflow:hidden}
.page.book-layout-editorialDuo .page-month{z-index:5;color:#62665b}
.book-layout-editorialDuo .add-page-photo{position:absolute;inset:15%;width:70%;height:70%}
#studio .thumbnail-paper.book-layout-editorialDuo{position:relative;padding:0;overflow:hidden;background:#f1f0e9}
.thumbnail-paper.book-layout-editorialDuo .thumbnail-caption{position:absolute;left:11%;top:45%;width:78%;height:5%;max-height:5%;font-size:2px;padding:0;color:#282a24}
#studio .controls .layout-mini.mini-editorialDuo{position:relative;display:block;padding:0;overflow:hidden;background:#f1f0e9}
.mini-editorialDuo i{position:absolute;background:#4d5747}
.mini-editorialDuo i:first-child{left:11%;top:10.5%;width:78%;height:32.5%}
.mini-editorialDuo i:nth-child(2){left:0;top:53.5%;width:100%;height:46.5%;background:#8a9478}
.mini-editorialDuo::before,.mini-editorialDuo::after{content:'';position:absolute;top:46%;height:1px;background:#62665b}
.mini-editorialDuo::before{left:11%;width:28%}.mini-editorialDuo::after{right:11%;width:16%}

/* Numbered sequence: three landscape frames and a generous index margin. */
.page.book-layout-numberedSequence{position:relative;display:block;padding:0;overflow:hidden;background:#e9e7e1}
.book-layout-numberedSequence .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;counter-reset:sequence-photo}
.book-layout-numberedSequence .page-photo-area>.photo-frame-slot{position:absolute;left:32.4%;width:67.6%;height:26.6%;padding:0;border:0;display:grid;grid-column:auto;grid-row:auto;overflow:visible;counter-increment:sequence-photo}
.book-layout-numberedSequence .photo-frame-slot:nth-child(1){top:8%}
.book-layout-numberedSequence .photo-frame-slot:nth-child(2){top:36.7%}
.book-layout-numberedSequence .photo-frame-slot:nth-child(3){top:65.4%}
.book-layout-numberedSequence .photo-frame-slot::before{content:'(0' counter(sequence-photo) ')';position:absolute;left:-33%;top:0;color:#282b25;font-size:2cqw;line-height:1.2;font-weight:500;pointer-events:none}
.page.book-layout-numberedSequence .book-page-caption{position:absolute;left:10%;bottom:2%;top:auto;width:80%;height:auto;max-height:4%;margin:0;padding:0;color:#50554a;font-size:1.8cqw;line-height:1.2;text-align:right;z-index:5;overflow:hidden}
.page.book-layout-numberedSequence .page-month{z-index:5;color:#50554a;font-size:1.6cqw}
#studio .thumbnail-paper.book-layout-numberedSequence{position:relative;padding:0;overflow:hidden;background:#e9e7e1}
.thumbnail-paper.book-layout-numberedSequence .photo-frame-slot::before{font-size:2px}
.thumbnail-paper.book-layout-numberedSequence .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-numberedSequence{position:relative;display:block;padding:0;overflow:hidden;background:#e9e7e1;counter-reset:mini-sequence}
.mini-numberedSequence i{position:absolute;left:32.4%;width:67.6%;height:26.6%;background:#52594c;counter-increment:mini-sequence}
.mini-numberedSequence i:nth-child(1){top:8%}.mini-numberedSequence i:nth-child(2){top:36.7%}.mini-numberedSequence i:nth-child(3){top:65.4%}
.mini-numberedSequence i::before{content:'(0' counter(mini-sequence) ')';position:absolute;left:-33%;top:0;font-size:5px;font-style:normal;color:#282b25}

/* Swapped memories: two photographs reused in opposite centre insets. */
.page.book-layout-swappedEcho{position:relative;display:block;padding:0;overflow:hidden;background:var(--page-bg,#f4f2eb)}
.book-layout-swappedEcho .page-photo-area{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0}
.book-layout-swappedEcho .photo-frame-slot{position:absolute;display:grid;grid-column:auto;grid-row:auto;padding:0;border:0;margin:0}
.book-layout-swappedEcho .photo-frame-slot:nth-child(1){left:0;top:0;width:100%;height:50%;z-index:0}
.book-layout-swappedEcho .photo-frame-slot:nth-child(2){left:0;top:50%;width:100%;height:50%;z-index:0}
.book-layout-swappedEcho .photo-frame-slot:nth-child(3){left:35%;top:calc(50% - 30cqw);width:30%;height:30cqw;z-index:3}
.book-layout-swappedEcho .photo-frame-slot:nth-child(4){left:35%;top:50%;width:30%;height:30cqw;z-index:3}
.page.book-layout-swappedEcho .book-page-caption{position:absolute;left:8%;bottom:4%;top:auto;width:84%;height:auto;max-height:9%;margin:0;padding:0;font-size:2.6cqw;line-height:1.3;text-align:center;color:#fff;text-shadow:0 1px 4px #0009;z-index:5;overflow:hidden}
.page.book-layout-swappedEcho .page-month{z-index:5;color:#fff;text-shadow:0 1px 4px #0009}
#studio .thumbnail-paper.book-layout-swappedEcho{position:relative;padding:0;overflow:hidden;container-type:inline-size}
.thumbnail-paper.book-layout-swappedEcho .thumbnail-caption{display:none}
#studio .controls .layout-mini.mini-swappedEcho{position:relative;display:block;padding:0;overflow:hidden;container-type:inline-size;background:#aab09f}
.mini-swappedEcho i{position:absolute}
.mini-swappedEcho i:nth-child(1){left:0;top:0;width:100%;height:50%;background:#606b58}
.mini-swappedEcho i:nth-child(2){left:0;top:50%;width:100%;height:50%;background:#ba9d72}
.mini-swappedEcho i:nth-child(3){left:35%;top:calc(50% - 30cqw);width:30%;height:30cqw;background:#ba9d72;z-index:3}
.mini-swappedEcho i:nth-child(4){left:35%;top:50%;width:30%;height:30cqw;background:#606b58;z-index:3}

/* Real photographs make layout proportions and overlaps easier to compare. */
#studio .controls .layout-mini .layout-preview-photo{background-size:cover;background-position:center;background-repeat:no-repeat;background-origin:content-box;background-clip:content-box}

/* Soft, organic loading light stays inside each photographic preview frame. */
#studio .controls .layout-mini .layout-preview-photo.is-photo-loading,#studio .controls .layout-mini .layout-preview-photo.is-photo-unavailable{background-color:#dce0d6}
.layout-photo-shimmer{display:block;width:100%;height:100%;min-height:0;pointer-events:none;opacity:1;background-color:#dce0d6;background-image:radial-gradient(ellipse at 30% 35%,#ffffffbd 0,transparent 62%),radial-gradient(ellipse at 75% 75%,#bac6b27d 0,transparent 68%),linear-gradient(110deg,transparent 20%,#ffffff73 48%,transparent 76%);background-size:220% 200%,220% 200%,260% 100%;background-position:110% 30%,0 80%,130% 0;animation:organic-layout-shimmer 2.6s ease-in-out infinite;animation-delay:var(--shimmer-offset,0s);transition:opacity .25s ease}
.is-photo-ready>.layout-photo-shimmer{opacity:0;animation:none}
.is-photo-unavailable>.layout-photo-shimmer{animation:none;opacity:.5}
@keyframes organic-layout-shimmer{0%,100%{background-position:110% 30%,0 80%,130% 0}50%{background-position:0 70%,100% 20%,-30% 0}}
@media(prefers-reduced-motion:reduce){.layout-photo-shimmer{animation:none;transition:none}}

/* Directional studio light: upper-left illumination and a grounded cast shadow. */
#studio .preview-area .cover.cover-mockup,.flow-card .cover.cover-mockup{
  box-shadow:inset 1px 1px 1px #ffffff70,inset -1px -1px 1px #171b1638,1px 3px 3px #25282040,18px 25px 3px -2px #25282046,24px 32px 22px -9px #25282030;
}
.cover-mockup .cover-lighting{position:absolute;inset:0;border-radius:inherit;z-index:6;pointer-events:none;background:linear-gradient(125deg,#ffffff26 0%,#ffffff0a 32%,transparent 50%,#171d1408 78%,#171d1416 100%);box-shadow:inset 0 1px 1px #ffffff60,inset -1px 0 1px #10150f30,inset 0 -2px 2px #10150f16}
.cover-mockup .cover-spine{width:6%;z-index:7;background:linear-gradient(90deg,#12170f38 0%,#ffffff35 12%,#ffffff14 24%,#24291e24 36%,#ffffff0c 52%,#181e1216 67%,transparent 100%);box-shadow:inset 1px 0 1px #ffffff50}
.cover-mockup .cover-page-edges::before{background:linear-gradient(90deg,#a5a294,#e2dfd3 55%,#b5b1a3);box-shadow:1px 1px 1px #171b162b}
.cover-mockup .cover-page-edges::after{background:linear-gradient(#aba798 0 1px,#e9e5d8 1px 2px,#b7b2a3 2px);box-shadow:0 1px 2px #171b1626}
#studio .preview-area .cover.mockup-softcover,.flow-card .cover.mockup-softcover{box-shadow:inset 1px 1px 1px #ffffff60,inset -1px -1px 1px #171b1626,1px 2px 2px #25282035,9px 13px 3px -1px #25282038,14px 19px 15px -6px #25282026}
.mockup-softcover .cover-spine{width:3%;opacity:.6}
.turn-face .cover-lighting{display:none}
@media(max-width:700px){#studio .preview-area .cover.cover-mockup{box-shadow:inset 1px 1px 1px #ffffff60,inset -1px -1px 1px #171b1630,1px 2px 2px #25282038,12px 17px 3px -2px #25282040,17px 23px 17px -8px #25282028}}
@media print{.cover-lighting{display:none!important}}

@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-400-normal.woff2') format('woff2');font-style:normal;font-weight:400;font-display:swap}
@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-400-italic.woff2') format('woff2');font-style:italic;font-weight:400;font-display:swap}
/* The Poetry Book: an upper portrait, volume line and centred calligraphic title. */
.cover-poetry .designed-pictures{left:36%;top:17%;width:28%;height:26%;padding:0;border:0;gap:0}
.cover-poetry .designed-subtitle{left:20%;top:45%;width:60%;height:5%;padding:0;font-family:'Cormorant Garamond',serif!important;font-size:2.2cqw;line-height:1.1;font-weight:400;letter-spacing:.06em;text-align:center;text-transform:uppercase}
.cover-poetry .designed-title{left:12%;top:51%;width:76%;height:24%}
/* Both covers share the same title typography, while keeping their compositions. */
:is(.cover-poetry,.cover-strip) .designed-title{padding-top:1%;font-family:Arimo,sans-serif!important;font-size:7.2cqw;font-weight:400;line-height:1.03;letter-spacing:-.045em;text-align:center;text-transform:uppercase;text-wrap:balance}
:is(.cover-poetry,.cover-strip):not(.has-custom-title-font) .designed-title::first-letter{font-family:'Cormorant Garamond',serif!important;font-size:1.5em;font-style:italic;line-height:.65}
.cover-poetry .designed-names{left:18%;bottom:8%;width:64%;height:5%;font-family:'Cormorant Garamond',serif!important;font-size:2.2cqw;font-weight:400;line-height:1.15;letter-spacing:.045em;text-align:center;text-transform:uppercase}
.cover-poetry .designed-year{left:20%;right:auto;bottom:4%;width:60%;height:3%;font-family:'Cormorant Garamond',serif!important;font-size:2cqw;font-weight:400;letter-spacing:.045em;line-height:1;text-align:center}
.cover-poetry .designed-pictures{left:50%;width:auto;aspect-ratio:.86;transform:translateX(-50%)}
#studio .controls .cover-designs{grid-template-columns:repeat(2,minmax(0,1fr))}

@font-face{font-family:'Cormorant Garamond';src:url('assets/fonts/cormorant-garamond-latin-700-normal.woff2') format('woff2');font-style:normal;font-weight:700;font-display:swap}
/* The Editorial Classic: bold book typography and balanced corner credits. */
.cover-editorialClassic .designed-title{left:9%;top:3%;width:51%;height:22%;padding:0;font-family:'Cormorant Garamond',serif!important;font-size:8.3cqw;font-weight:700;line-height:.9;letter-spacing:-.025em;text-align:left;text-transform:none;text-wrap:balance}
.cover-editorialClassic .designed-subtitle{left:auto;right:5%;top:4%;width:26%;height:18%;padding:0;font-family:Arimo,sans-serif!important;font-size:2.5cqw;line-height:1.2;font-weight:400;letter-spacing:0;text-align:right;text-transform:none}
.cover-editorialClassic .designed-pictures{left:50%;top:30%;height:45%;width:auto;aspect-ratio:.72;transform:translateX(-50%);padding:0;border:0;gap:0}
.cover-editorialClassic .designed-names{left:9%;bottom:3%;width:42%;height:7%;font-family:Arimo,sans-serif!important;font-size:3.4cqw;font-weight:400;line-height:1.15;text-align:left;text-transform:none;letter-spacing:0}
.cover-editorialClassic .designed-year{left:auto;right:5%;bottom:3%;width:42%;height:7%;font-family:Arimo,sans-serif!important;font-size:3.4cqw;font-weight:400;line-height:1.15;text-align:right;text-transform:none;letter-spacing:0}

/* The Travel Poster: oversized grotesk typography around an offset portrait. */
.cover-travelPoster .designed-title{left:6%;top:2%;width:89%;height:36%;padding:0;font-family:Arimo,sans-serif!important;font-size:21cqw;font-weight:400;line-height:.84;letter-spacing:-.065em;text-align:right;text-transform:uppercase;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.cover-travelPoster .designed-pictures{left:auto;right:8%;top:37%;height:31%;width:auto;aspect-ratio:.76;transform:none;padding:0;border:0;gap:0}
.cover-travelPoster .designed-subtitle{left:7%;top:69%;width:88%;height:29%;padding:0;font-family:Arimo,sans-serif!important;font-size:20cqw;font-weight:400;line-height:.84;letter-spacing:-.065em;text-align:left;text-transform:uppercase;text-wrap:balance;overflow-wrap:normal;word-break:normal}
.cover-travelPoster .designed-names{left:7%;top:42%;bottom:auto;width:40%;height:12%;font-family:Arimo,sans-serif!important;font-size:2.3cqw;line-height:1.2;text-align:left;text-transform:uppercase;letter-spacing:.04em}
.cover-travelPoster .designed-year{left:7%;right:auto;top:61%;bottom:auto;width:40%;height:4%;font-family:Arimo,sans-serif!important;font-size:2.1cqw;line-height:1;text-align:left;letter-spacing:.04em}
.cover-travelPoster .designed-title{font-size:var(--poster-title-size,21cqw)}
.cover-travelPoster .designed-subtitle{font-size:var(--poster-subtitle-size,20cqw)}
.cover-travelPoster .designed-names,.cover-travelPoster .designed-year{display:none}

/* Quiet photographic monograph: generous space and a grounded serif title. */
.cover-linenEdition .designed-title{left:6%;top:auto;bottom:2%;width:90%;height:23%;padding:0;display:flex;align-items:flex-end;font-family:Georgia,serif!important;font-weight:700;font-size:var(--linen-title-size,18cqw);line-height:.88;letter-spacing:-.055em;text-align:left;text-transform:uppercase;white-space:pre-wrap;overflow-wrap:normal}
.cover-linenEdition .designed-subtitle{left:18%;top:19%;width:66%;height:10%;padding:0;font-family:Georgia,serif!important;font-size:2.2cqw;line-height:1.25;text-align:center;letter-spacing:0}
.cover-linenEdition .designed-pictures{left:50%;top:35%;height:31%;width:auto;aspect-ratio:.83;transform:translateX(-50%);padding:0;border:0;gap:0}
.cover-linenEdition .designed-names,.cover-linenEdition .designed-year{display:none}

/* Scanned paper grain stays beneath the artwork, with no live noise filter. */
.cover-mockup .cover-material{z-index:0;background-image:url('assets/cover-paper-grain.png');background-size:370px 370px;background-repeat:repeat;mix-blend-mode:multiply;opacity:.62}

/* Soft, raking daylight reveals the paper rather than a flat studio fill. */
.cover-mockup .cover-material{
  background-size:520px 520px;
  filter:contrast(2.1);
  opacity:.82;
}
#studio .preview-area .cover.cover-mockup,.flow-card .cover.cover-mockup{
  box-shadow:inset 1px 1px 2px #ffffff55,inset -1px -1px 1px #171b1628,1px 3px 4px #20221f30,13px 17px 19px -6px #25282045,26px 31px 38px -13px #25282028;
}
.cover-mockup .cover-lighting{
  background:linear-gradient(133deg,#ffffff0a 0%,#ffffff08 8%,#ffffff38 20%,#ffffff48 29%,#ffffff0a 40%,#10181122 49%,#10181116 55%,#ffffff2e 66%,#ffffff36 73%,#ffffff08 86%,#10181115 100%);
  box-shadow:inset 0 1px 2px #ffffff50,inset -1px 0 2px #10150f24,inset 0 -1px 2px #10150f14;
}
.cover-mockup .cover-spine{
  background:linear-gradient(90deg,#12170f2a 0%,#ffffff48 14%,#ffffff24 27%,#24291e18 43%,#ffffff0a 64%,transparent 100%);
}
.cover-mockup .cover-material{filter:brightness(.55) contrast(3);mix-blend-mode:soft-light;opacity:.9}

/* One shared daylight field across the mat and book, with no cover-only bands. */
#studio .preview-area{isolation:isolate}
#studio .preview-area::after{
  content:'';position:absolute;inset:0;z-index:20;pointer-events:none;
  background:radial-gradient(ellipse at 4% 0%,rgba(255,247,222,.25) 0%,rgba(255,250,235,.12) 32%,transparent 68%),linear-gradient(125deg,transparent 22%,rgba(45,51,57,.025) 57%,rgba(45,51,57,.09) 100%);
}
.cover-mockup .cover-lighting{
  background:none;
  box-shadow:inset 0 1px 2px #ffffff38,inset -1px 0 2px #10150f16,inset 0 -1px 2px #10150f12;
}
#studio .preview-area .cover.cover-mockup,.flow-card .cover.cover-mockup{
  box-shadow:inset 1px 1px 2px #ffffff35,inset -1px -1px 1px #171b161c,1px 2px 3px #20221f25,8px 12px 17px -6px #25282032,20px 26px 42px -13px #25282024;
}

.photo-preparation[hidden]{display:none}
.photo-preparation{position:fixed;inset:0;z-index:10000;background:#f6f6f2;color:#292c27;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden;gap:24px}
.preparation-scene{width:min(440px,90vw);height:min(350px,44dvh);perspective:1000px;display:grid;place-items:center}
.preparation-cluster{position:relative;width:270px;height:250px;transform-style:preserve-3d;animation:preparation-drift 12s ease-in-out infinite alternate}
.preparation-photo{position:absolute;left:calc(50% - 29px);top:calc(50% - 38px);width:58px;height:76px;background:#e3e4df;background-size:cover;background-position:center;box-shadow:0 4px 12px #252a2214;backface-visibility:hidden;transform:translate(var(--px),var(--py)) rotate(var(--r));animation:preparation-float 4.8s ease-in-out infinite;animation-delay:calc(var(--i)*-.43s);transition:background-color .3s}
.preparation-photo:nth-child(1){--px:-80px;--py:-77px;--r:-9deg}
.preparation-photo:nth-child(2){--px:5px;--py:-95px;--r:7deg}
.preparation-photo:nth-child(3){--px:91px;--py:-53px;--r:12deg}
.preparation-photo:nth-child(4){--px:-120px;--py:10px;--r:-5deg}
.preparation-photo:nth-child(5){--px:-34px;--py:-5px;--r:3deg}
.preparation-photo:nth-child(6){--px:48px;--py:15px;--r:-8deg}
.preparation-photo:nth-child(7){--px:120px;--py:48px;--r:8deg}
.preparation-photo:nth-child(8){--px:-76px;--py:100px;--r:-11deg}
.preparation-photo:nth-child(9){--px:7px;--py:89px;--r:6deg}
.preparation-photo:nth-child(10){--px:73px;--py:133px;--r:-4deg}
.preparation-photo:not(.has-photo){background:linear-gradient(135deg,#e9eae4,#d9dcd3);opacity:.55}
.preparation-copy{text-align:center;padding:0 24px;max-width:430px}
.preparation-copy h2{margin:0 0 14px}
.preparation-count{color:#64695f;font-variant-numeric:tabular-nums;margin:0 0 16px}
.preparation-copy progress{display:block;width:160px;height:2px;border:0;margin:0 auto;background:#dedfd8;accent-color:#626d58;border-radius:2px;overflow:hidden}
.preparation-copy progress::-webkit-progress-bar{background:#dedfd8}
.preparation-copy progress::-webkit-progress-value{background:#626d58;transition:width .25s}
.preparation-privacy{color:#808578;margin:18px 0 0}
@keyframes preparation-float{0%,100%{transform:translate(var(--px),var(--py)) rotate(var(--r)) translateZ(0)}50%{transform:translate(var(--px),calc(var(--py) - 12px)) rotate(var(--r)) translateZ(32px)}}
@keyframes preparation-drift{from{transform:rotateX(8deg) rotateY(-12deg) rotateZ(-3deg)}to{transform:rotateX(-5deg) rotateY(10deg) rotateZ(3deg)}}
@media(prefers-reduced-motion:reduce){.preparation-photo,.preparation-cluster{animation:none}.preparation-copy progress::-webkit-progress-value{transition:none}}
@media(max-height:500px){.photo-preparation{flex-direction:row;gap:8px}.preparation-scene{height:80dvh;transform:scale(.7);width:45vw}.preparation-copy{max-width:50vw}}

/* An atmospheric welcome, with a single centred creation card. */
.guided-flow[hidden]{display:none}
.guided-flow{display:flex;align-items:center;justify-content:center;padding:48px 24px;isolation:isolate;background:#4d5042;backdrop-filter:none;overflow:auto}
.flow-backdrop{position:fixed;inset:0;z-index:-1;pointer-events:none;background:#777963 url('assets/creation-atmosphere-poster.jpg') center/cover no-repeat}
.flow-backdrop::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,#131a1328,#151a1420 50%,#13171350)}
.flow-atmosphere{width:100%;height:100%;object-fit:cover;display:block}
.guided-flow .flow-card{width:min(680px,100%);max-width:680px;max-height:calc(100dvh - 96px);overflow-y:auto;margin:auto;padding:26px 32px;border:1px solid #ffffff2b;border-radius:24px;background:#1b201cde;backdrop-filter:blur(22px);-webkit-backdrop-filter:blur(22px);box-shadow:0 20px 70px #141a163b;scrollbar-width:thin;scrollbar-color:#ffffff40 transparent}
.guided-flow .flow-card header{margin-bottom:24px;color:#e1e4d7;font-size:11px;letter-spacing:.06em}
.guided-flow .flow-brand{font-size:22px;color:#f7f5e9}
.guided-flow .flow-card #flow-close{background:#ffffff0c;border:1px solid #ffffff16;color:#f5f5eb}
.guided-flow .flow-card footer{margin-top:24px;padding-top:20px;border-color:#ffffff16}
.guided-flow .flow-card .muted,.guided-flow .flow-card .privacy-note{color:#c1c6ba}
.flow-motion-toggle{position:fixed;bottom:16px;left:20px;z-index:2;padding:8px 12px;border:1px solid #ffffff30;border-radius:30px;background:#1b201c70;color:#f8f7ec;backdrop-filter:blur(12px)}
.flow-motion-toggle:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(max-width:600px){.guided-flow{padding:44px 14px}.guided-flow .flow-card{padding:22px 20px;border-radius:20px;max-height:calc(100dvh - 88px)}.flow-motion-toggle{bottom:10px;left:14px;padding:6px 10px}}
@media(prefers-reduced-motion:reduce){.flow-atmosphere:not([src]){visibility:hidden}}
.guided-flow .flow-dates{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}
.guided-flow .flow-dates summary{grid-column:1/-1;margin-bottom:2px}
.guided-flow .flow-dates:not([open])>.field{display:none}
.guided-flow .flow-dates .field{margin:0;min-width:0}
.guided-flow .flow-dates .field input{width:100%;min-width:0}
.guided-flow .story-choices{margin:24px 0}
.guided-flow .story-choice{min-height:88px;padding:16px 12px}
.guided-flow .flow-card h1{font-size:clamp(26px,3vw,36px);line-height:1.15}
@media(max-width:420px){.guided-flow .story-choices{grid-template-columns:1fr;gap:8px}.guided-flow .story-choice{min-height:48px;padding:12px}.guided-flow .flow-dates{gap:8px}.guided-flow .flow-dates input{padding:10px}}
.guided-flow .flow-dates{display:block}
.guided-flow .flow-date-fields{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.guided-flow .flow-dates:not([open]) .flow-date-fields{display:none}
.guided-flow .flow-card footer{display:flex;align-items:center;justify-content:space-between}
.guided-flow #flow-next,.guided-flow #flow-skip-upload{margin-left:auto}
.guided-flow .flow-card footer{gap:10px}
.guided-flow #flow-skip-upload{white-space:normal;text-align:center;line-height:1.35;max-width:75%}

/* A steady card: only its content scrolls, while progress and actions stay put. */
.guided-flow[data-phase] .flow-card{height:min(720px,calc(100dvh - 96px));max-height:none;display:flex;flex-direction:column;overflow:hidden;padding:26px 32px;box-sizing:border-box}
.guided-flow .flow-card header{flex:0 0 auto;position:relative;min-height:44px;gap:14px;margin-bottom:24px}
.guided-flow #flow-content{flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:#ffffff35 transparent;padding-right:4px}
.guided-flow .flow-card footer{flex:0 0 auto;margin-top:18px;padding-top:18px}
.flow-step-ring{position:relative;width:44px;height:44px;flex:0 0 44px}
.flow-step-ring[hidden],.flow-step-caption[hidden]{display:none}
.flow-step-ring svg{width:44px;height:44px;transform:rotate(-90deg)}
.flow-step-ring circle{fill:none;stroke-width:2}
.flow-ring-track{stroke:#ffffff20}
.flow-ring-value{stroke:#e6ead8;stroke-linecap:round;stroke-dasharray:113.097;stroke-dashoffset:calc(113.097 * (1 - var(--step-progress,0)));transition:stroke-dashoffset .4s ease}
.flow-ring-number{position:absolute;inset:0;display:grid;place-items:center;color:#f4f5ec;font-size:14px;letter-spacing:0;font-variant-numeric:tabular-nums}
.guided-flow .flow-step-caption{position:absolute;left:58px;top:4px;font-size:10px;color:#bdc4b5;letter-spacing:.02em}
.guided-flow #flow-progress{padding-top:15px;color:#f0f2e9;letter-spacing:0;font-size:13px}
.guided-flow[data-phase=resume] #flow-progress{padding-top:0}
@media(max-width:600px){.guided-flow[data-phase] .flow-card{height:calc(100dvh - 88px);padding:22px 20px}.guided-flow .flow-card header{margin-bottom:20px}.guided-flow .flow-card footer{margin-top:14px;padding-top:14px}}
@media(prefers-reduced-motion:reduce){.flow-ring-value{transition:none}}

/* Every format shares one physical scale, rather than one fixed photo height. */
.guided-flow .size-shape-stage{display:flex;align-items:center;justify-content:center;width:80px;height:80px;max-width:100%;flex:0 0 80px}
.guided-flow .size-shape{display:block;max-width:none;min-height:0;flex:none;box-sizing:border-box;box-shadow:2px 2px 0 #777}
.guided-flow .size-card{justify-content:flex-start;gap:10px;padding:14px 8px;min-width:0}
.guided-flow .size-card strong{line-height:1.3;white-space:nowrap}
.guided-flow .size-card small{line-height:1.3;min-height:12px}
.guided-flow[data-phase=size] .book-options{margin:0}
.guided-flow[data-phase=size] .size-cards{margin-top:16px}
.guided-flow .size-shape-stage{width:72px;height:72px;flex-basis:72px}
.guided-flow .size-card{padding:12px 8px;gap:8px}

.exporting-proof .cover:before,.exporting-proof .cover:after,.exporting-proof .page:before,.exporting-proof .page:after{box-shadow:none!important}
.exporting-proof .cover-photo-selected{outline:none!important;box-shadow:none!important}
/* Keep empty slots in the layout, but print only the surrounding paper. */
.exporting-proof .empty-photo-frame,.exporting-proof .empty-photo-frame *,
.exporting-proof .designed-slot:has(.cover-empty),.exporting-proof .designed-slot:has(.cover-empty) *{visibility:hidden!important}

/* One edge-to-edge photo. Shared by the canvas, filmstrip and PDF rendering. */
.page.book-layout-fullBleed{position:relative;display:block;padding:0;gap:0;overflow:hidden}
.book-layout-fullBleed .page-photo-area{position:absolute;inset:0;width:100%;height:100%;padding:0;gap:0}
.book-layout-fullBleed .page-photo-area>.photo-frame-slot{width:100%;height:100%;margin:0;padding:0;border:0}
.page.book-layout-fullBleed .page-month,.page.book-layout-fullBleed:not(.has-caption)>.book-page-caption{display:none}
.page.book-layout-fullBleed>.book-page-caption{position:absolute;inset:auto 6% 6%;width:auto;margin:0;padding:0;z-index:5;color:#fff;text-shadow:0 1px 4px #0009}
#studio .controls .layout-mini.mini-fullBleed{padding:0;gap:0;overflow:hidden}