@font-face{font-family:Inter;src:url('assets/fonts/inter.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('assets/fonts/geist-mono.woff2') format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
:root{--paper:#f8f4f1;--ink:#080908;--mint:#37d4b1;--muted:#898883;--line:rgba(20,22,18,.15);--gutter:clamp(24px,5.6vw,96px);--font:Inter,Arial,sans-serif;--mono:'Geist Mono',monospace;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:24px}body{margin:0;background:#000;color:var(--ink);font-family:var(--font);font-size:16px;-webkit-font-smoothing:antialiased}button,input{font:inherit}button,a{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:wait}button,a{touch-action:manipulation}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid var(--mint);outline-offset:6px}a{color:inherit}img{display:block;max-width:100%}h1,h2,h3,p{margin:0}button{border:0}fieldset{min-width:0}::selection{background:var(--mint);color:#000}[hidden]{display:none!important}.light{background:var(--paper)}.dark{background:#000;color:var(--paper)}.mono{font-family:var(--mono);font-size:12px;font-weight:400;letter-spacing:.045em;line-height:1.6}.eyebrow{font-size:12px;letter-spacing:.12em;font-weight:600;line-height:1.5}.muted{color:#a9a59e}.muted-dark{color:#696b68}.story{padding:52px var(--gutter) 56px;position:relative;overflow:hidden}.section-top{display:flex;justify-content:space-between;align-items:center;gap:20px;position:relative;z-index:2}.section-number{color:#777972}.dark .section-number{color:#999b94}.story h2,.maker h2{font-size:clamp(64px,8.4vw,142px);line-height:.99;font-weight:400;letter-spacing:-.067em}.story-copy{font-size:clamp(17px,1.55vw,23px);font-weight:400;line-height:1.6;letter-spacing:-.035em}.brand{font-size:31px;font-weight:750;letter-spacing:-.075em;line-height:1;text-decoration:none}.brand-dot{color:var(--mint)}
/* The shared miPic wordmark ships as #333, so it is inverted to white for dark
   backgrounds — same technique as the Star Player page. */
.brand img,.footer-brand img{height:21px;width:auto;display:block;filter:brightness(0) invert(1)}.brand img{height:29px}
.hero{height:370svh;background:#000;color:var(--paper)}.hero-stage{height:100svh;min-height:640px;position:sticky;top:0;overflow:hidden;isolation:isolate}.masthead{position:absolute;top:0;left:var(--gutter);right:var(--gutter);height:92px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #242522;z-index:7}.masthead-edition{font-size:11px;color:#b7bab4;letter-spacing:.08em}.hero-heading{position:absolute;top:18.5%;left:0;width:100%;text-align:center;z-index:3;will-change:transform,opacity}.hero-heading .eyebrow{font-size:11px;letter-spacing:.2em;color:#9c9e98;margin-bottom:23px}.hero h1{font-size:clamp(75px,19.3vw,310px);letter-spacing:-.075em;font-weight:200;line-height:.85;margin-left:-.065em}.hero-visual{position:absolute;inset:26% 7% 9%;z-index:1;will-change:transform}.hero-frame{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;mix-blend-mode:screen;will-change:opacity,transform}.hero-frame.is-visible{opacity:1}.hero-copy{position:absolute;left:var(--gutter);bottom:14%;z-index:4;opacity:0;will-change:opacity,transform}.hero-copy p{font-size:clamp(24px,3.15vw,50px);line-height:1.15;letter-spacing:-.045em;font-weight:400}.hero-copy span{color:#8f928b}.hero-caption{position:absolute;right:var(--gutter);bottom:14.5%;max-width:210px;text-align:right;z-index:4;opacity:0}.hero-caption .mono{font-size:10px;color:#8d938a;letter-spacing:.1em}.hero-caption p{font-size:14px;line-height:1.6;margin-top:14px;color:#a9ada4;letter-spacing:-.02em}.hero-bottom{position:absolute;bottom:36px;left:var(--gutter);right:var(--gutter);display:flex;align-items:center;justify-content:space-between;color:#8f9489;z-index:4}.scroll-prompt{display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:10px;letter-spacing:.1em}.scroll-line{width:34px;height:1px;background:#8f9489}.hero-format{font-size:10px}.hero-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#1f221d}.hero-progress span{display:block;background:var(--mint);height:100%;width:100%;transform:scaleX(0);transform-origin:left;will-change:transform}
.paper{min-height:1080px;padding-bottom:36px}.paper-heading{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;margin:115px auto 0;max-width:1300px}.paper-heading .story-copy{padding-bottom:12px;padding-right:5%;color:#75756e}.paper-image{height:510px;margin:40px calc(-1 * var(--gutter)) 0;overflow:hidden}.paper-image img{width:100%;height:100%;object-fit:cover;object-position:center 58%;mix-blend-mode:multiply}.image-footnote{display:flex;justify-content:space-between;margin-top:30px;font-size:10px;color:#83847c;gap:16px}.binding{min-height:980px}.binding-composition{max-width:1450px;min-height:730px;margin:auto;position:relative;display:flex;align-items:center}.binding-copy{position:relative;z-index:2;width:55%;padding-bottom:30px}.binding-copy h2{font-size:clamp(64px,7.5vw,124px)}.binding-copy .story-copy{color:#969b91;margin-top:36px}.binding-image{position:absolute;right:calc(-1 * var(--gutter));top:8%;bottom:0;width:73%}.binding-image img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;mask-image:linear-gradient(90deg,transparent 0%,#000 22%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 22%)}.binding-note{font-size:10px;color:#6f776b;letter-spacing:.14em}.covers{min-height:1120px;padding-bottom:76px}.covers-heading{display:flex;align-items:flex-end;justify-content:space-between;max-width:1300px;margin:115px auto 0}.covers-heading .story-copy{padding-bottom:10px;padding-right:6%;color:#777971}.covers-image{max-width:1280px;margin:20px auto 0;height:480px;overflow:hidden}.covers-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.cover-labels{max-width:1040px;margin:14px auto 0;display:grid;grid-template-columns:1fr 1fr;gap:9vw;text-align:center}.cover-labels h3{font-size:30px;font-weight:400;letter-spacing:-.055em}.cover-labels .mono{font-size:10px;color:#83857c;margin:13px 0 19px}.cover-labels span{font-size:16px;letter-spacing:-.025em}.cover-labels .cover-spec{margin:14px 0 0;color:#9a9c93}.pricing-note{font-size:12px;color:#888a82;text-align:center;margin-top:40px;line-height:1.6}.colour{min-height:1000px;display:flex;flex-direction:column;isolation:isolate}.colour-image,.colour-shade{position:absolute;inset:0;z-index:-2}.colour-image img{width:100%;height:100%;object-fit:cover}.colour-shade{z-index:-1;background:linear-gradient(90deg,rgba(0,12,11,.8),rgba(0,11,8,.24)),linear-gradient(0deg,rgba(0,0,0,.75),transparent 32%,rgba(0,0,0,.35))}.colour-copy{margin-top:165px;position:relative}.colour h2{font-size:clamp(64px,8.3vw,138px)}.colour h2 span:not(.title-line):not(.title-line-inner){color:#b3d7c9}.colour-copy .story-copy{margin-top:42px;color:#cfddd5}.colour-note{font-size:10px;letter-spacing:.13em;line-height:1.9;margin-top:auto;padding-top:120px;color:#b5c5bb}
.maker{padding:150px var(--gutter) 130px;overflow:hidden}.maker-intro{text-align:center}.maker-intro .eyebrow{color:#777c72}.maker-intro h2{margin-top:32px;font-size:clamp(70px,9.1vw,150px)}.maker-intro>p{font-size:18px;color:#777d71;line-height:1.65;letter-spacing:-.035em;margin-top:36px}.book-stage{position:relative;perspective:1800px;max-width:970px;margin:92px auto 12px;padding:30px 15px 65px;transition:padding .5s}.book-shadow{position:absolute;inset:14% 3% 6%;background:#2b3024;opacity:.15;filter:blur(29px);border-radius:30%}.demo-book{display:flex;position:relative;width:100%;aspect-ratio:1.4142;background:#eeebe2;transform:rotateX(14deg) rotateZ(-2deg);transform-style:preserve-3d;box-shadow:0 1px 0 #d0cfc7,0 3px 0 #f0ede5,0 4px 0 #d1d1c7,0 7px 0 #f0ede5,0 9px 0 #c9ccc1;transition:transform 1.2s cubic-bezier(.2,.65,.1,1);border-radius:2px 5px 5px 2px}.book-page{width:50%;height:100%;position:relative;padding:9% 6.5%;background:#fffef9;overflow:hidden}.page-left{background:linear-gradient(90deg,#fffef9 88%,#eeece3 100%);border-radius:3px 0 0 2px}.page-right{background:linear-gradient(90deg,#eeece3 0%,#fffef9 12%);border-radius:0 3px 3px 0}.empty-frame{background:#e8e6df;border:1px solid rgba(170,173,159,.06)}.empty-large{height:80%;width:100%;margin-top:8%}.empty-pair{display:grid;grid-template-rows:1fr 1fr;gap:9%;height:100%;padding:6% 0}.empty-folio{position:absolute;bottom:5%;font-size:9px;color:#a4a69a}.page-right .empty-folio{right:13%}.book-gutter{position:absolute;top:0;bottom:0;left:calc(50% - 12px);width:24px;pointer-events:none;background:linear-gradient(90deg,transparent,rgba(63,60,42,.075) 42%,rgba(38,40,30,.22) 50%,rgba(63,60,42,.06) 56%,transparent);z-index:3}.book-lid{position:absolute;inset:0 50% 0 0;z-index:4;background:#303c31;color:var(--paper);transform-origin:right center;transform:rotateY(0);transition:transform 1.7s cubic-bezier(.2,.65,.1,1),opacity .6s .8s;backface-visibility:hidden;box-shadow:inset 0 0 0 1px #4b5746;display:flex;flex-direction:column;justify-content:space-between;padding:10% 5%;text-align:center}.lid-wordmark{font-size:clamp(16px,3.2vw,49px);font-weight:200;letter-spacing:-.05em}.lid-subline{font-size:9px;letter-spacing:.1em}.book-stage.is-open .book-lid{transform:rotateY(170deg);opacity:0;pointer-events:none}.book-stage.is-open .demo-book{transform:rotateX(7deg) rotateZ(-1deg)}.demo-book.has-photos .book-page{padding:0}.demo-book.has-photos .book-page>img{width:100%;height:100%;object-fit:cover}.preview-single{padding:17% 13%;height:100%}.preview-single img{width:100%;height:100%;object-fit:cover}.preview-duo{height:100%;padding:12% 14%;display:grid;grid-template-rows:1fr 1fr;gap:8%}.preview-duo img{width:100%;height:100%;object-fit:cover;min-height:0}/* The drop target is visible at rest, not only once you are already dragging —
   the same dashed-box affordance Star Player and Portrait use. The whole panel
   is clickable, so it behaves the way it looks. */
.upload-area{max-width:700px;margin:22px auto 0;text-align:center;padding:38px 24px 30px;position:relative;border:2px dashed #c4c8bb;border-radius:24px;background:#fbfaf7;cursor:pointer;transition:background .25s,border-color .25s}.upload-area:hover{border-color:#8d9482;background:#f4f2ec}.upload-area.is-dragging{border-color:#378b75;background:#ddf0e6}.upload-area.is-dragging:after{content:'Let your photos go.';position:absolute;inset:0;display:grid;place-items:center;background:#e5f4edee;border-radius:24px;font-size:24px;pointer-events:none}.button{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:58px;border-radius:100px;padding:17px 29px;font-size:15px;font-weight:500;letter-spacing:-.025em;line-height:1.3;transition:background .2s,transform .25s,box-shadow .2s}.button:hover{transform:translateY(-2px)}.button:active{transform:translateY(0)}.button:disabled{opacity:.6;transform:none}.button-dark{background:#111610;color:#f8f4f1;font-weight:600}.button-dark:hover{background:#283a2d;box-shadow:0 8px 22px #12261712}/* The closing CTA sits on black, where a black button would disappear, so the
   primary there is white — matching the PRO page's primary rather than the old
   mint fill. Mint stays a brand accent (dot, focus ring, progress bar), not a button. */
.button-light{background:#fbfaf7;color:#111610;font-weight:600}.button-light:hover{background:#fff}.button-outline{border:1.5px solid #111610;background:transparent;color:#111610;font-weight:500}.button-outline:hover{background:#111610;color:#f8f4f1}.sample-link{display:block;margin:22px auto 0;background:none;font-size:14px;letter-spacing:-.025em;text-underline-offset:5px;text-decoration:underline;text-decoration-color:#b9bfb1;padding:7px 12px}.sample-link span{display:inline-block;margin-left:5px;font-size:17px;text-decoration:none}.sample-link:hover{text-decoration-color:#1d4130}.upload-hint{margin-top:25px;color:#737c6d;font-size:12px;line-height:1.9}.upload-hint span{color:#969d90}.upload-status{font-size:13px;line-height:1.65;color:#426450;min-height:22px;margin-top:18px}.upload-status.error{color:#87533e}.load-progress{height:3px;background:#dddeda;border-radius:4px;max-width:220px;margin:15px auto}.load-progress span{display:block;width:0;height:100%;background:#2fa486;border-radius:4px;transition:width .2s}.book-results{max-width:1220px;margin:125px auto 0}.results-header{border-top:1px solid var(--line);padding-top:40px;display:flex;align-items:flex-end;justify-content:space-between;gap:24px}.results-header .eyebrow{font-size:10px;color:#7b8473}.results-header h3{font-size:clamp(30px,4.5vw,60px);font-weight:400;letter-spacing:-.065em;margin-top:16px}.results-header h3 span{color:#9fa498}.results-header>p{color:#717b68;text-align:right;font-size:11px}.spread-stack{margin-top:60px;display:grid;gap:68px}.spread-item{margin:0;content-visibility:auto;contain-intrinsic-size:auto 760px}.spread-surface{position:relative;display:grid;grid-template-columns:1fr 1fr;aspect-ratio:1.4142;background:#fffefa;box-shadow:0 1px 0 #d7d7cd,0 3px 0 #eae9df,0 4px 0 #d1d2c6,0 24px 35px -24px #36422959;isolation:isolate;overflow:hidden;border-radius:2px}.spread-surface:after{content:'';position:absolute;top:0;bottom:0;left:calc(50% - 12px);width:24px;background:linear-gradient(90deg,transparent,#211e090d 40%,#302b101f 50%,#302b100b 55%,transparent);z-index:4;pointer-events:none}.spread-page{position:relative;padding:15% 12%;min-width:0;min-height:0}.spread-page img{width:100%;height:100%;object-fit:cover;min-height:0;display:block}.spread-image{min-height:0;min-width:0;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;width:100%;height:100%}.spread-image img{width:auto;height:auto;max-width:100%;max-height:100%;object-fit:cover}.spread-image.bleed img{width:100%;height:100%;max-width:none;max-height:none}.spread-image.contain img{object-fit:contain}.spread-stack.is-fit-whole .spread-image img,.demo-book.is-fit-whole img{object-fit:contain}/* Matches the print spec: 7pt mono, 60% grey, baseline 4mm below the cell, left
   aligned to the cell, single line with an ellipsis. At the preview's scale
   (~2.9px per mm) 7pt is ~7px and 4mm is ~11px. */
/* Centred under the PHOTOGRAPH, not pinned to the cell's left edge. A snapped
   frame is often narrower than its cell, so left:0 put the number adrift to
   the left of the image in every layout except 'pair', where frame and cell
   happen to be the same width. Centring aligns it in all of them. */
.spread-image figcaption{font-family:var(--mono);font-size:clamp(6px,.58vw,8px);letter-spacing:.05em;padding-top:11px;color:#666;position:absolute;top:100%;left:0;right:0;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.spread-surface[data-layout=hero]{display:block}.spread-hero{width:100%;height:100%;object-fit:cover}.spread-surface[data-layout=hero] .spread-hero.portrait{object-fit:contain;background:#111710}.spread-surface[data-layout=duo] .spread-page{padding:0}.spread-surface[data-layout=duo] .spread-image{width:100%;height:100%}.spread-surface[data-layout=pair] .spread-page{display:flex;align-items:center}.spread-surface[data-layout=pair] .spread-image{width:100%;height:100%;overflow:visible}.spread-surface[data-layout=asymmetric] .spread-page:first-child{padding:0}.spread-surface[data-layout=asymmetric] .spread-page:first-child .spread-image{height:100%}.spread-surface[data-layout=asymmetric] .spread-page:last-child{display:grid;grid-template-rows:1fr 1fr;gap:12%;padding:18% 14%}.spread-surface[data-layout=grid] .spread-page{display:grid;grid-template-rows:1fr 1fr;gap:12%;padding:16% 13%}.spread-surface[data-layout=contact] .spread-page{display:grid;grid-template-rows:repeat(3,1fr);gap:8%;padding:13% 15%}.spread-surface[data-layout=single] .spread-page:first-child{padding:0}.spread-surface[data-layout=single] .spread-image{height:100%}.quiet-page{display:flex;flex-direction:column;justify-content:center;align-items:center;padding:12%;text-align:center}.quiet-page span{font-size:clamp(12px,2.5vw,32px);letter-spacing:-.04em;font-weight:300;line-height:1.3;color:#7c8375}.quiet-page small{font-family:var(--mono);font-size:clamp(5px,.6vw,9px);letter-spacing:.15em;margin-top:15%;color:#a2a895}.spread-meta{display:flex;justify-content:space-between;gap:16px;margin-top:18px;color:#828a78;font-size:10px}.spread-surface.is-changing{animation:recompose .55s ease both}@keyframes recompose{0%{opacity:.35;transform:translateY(8px)}100%{opacity:1;transform:none}}.shuffle-area{text-align:center;margin:90px 0 0}.shuffle-area>p:first-child{font-size:18px;letter-spacing:-.04em;color:#78846f;margin-bottom:24px}.shuffle-status{min-height:20px;margin-top:20px;color:#76876a;font-size:10px}
.closing{min-height:900px;padding:125px var(--gutter) 112px;text-align:center}.closing .eyebrow{color:#848e7c;font-size:11px;letter-spacing:.16em}.closing h2{font-size:clamp(110px,15.5vw,240px);line-height:.92;letter-spacing:-.08em;font-weight:300;margin:52px 0 55px}.closing h2 span:not(.title-line):not(.title-line-inner){color:#a8b2a0}.closing .button{min-width:202px}.closing-prices{font-size:14px;color:#aeb7a4;margin-top:29px;letter-spacing:-.02em}.closing-prices span{padding:0 10px;color:#626c5b}.closing-small{font-size:11px;color:#737e68;margin-top:13px}.site-footer{margin-top:-1px;padding:35px var(--gutter);border-top:1px solid #242a1e;display:flex;align-items:flex-start;gap:32px;flex-wrap:wrap}.footer-brand-block{display:flex;flex-direction:column;gap:10px}.footer-tagline{font-size:13px;color:#7c8870;letter-spacing:-.025em}.footer-tagline span{color:var(--mint)}.footer-location{font-size:9px;letter-spacing:.08em;color:#59654d}.footer-links{display:flex;flex-wrap:wrap;gap:8px 22px;margin-left:auto;align-items:center}.footer-links a{font-size:12px;color:#8c9783;letter-spacing:-.02em;text-decoration:none}.footer-links a:hover{color:var(--paper);text-decoration:underline;text-underline-offset:4px}.back-top{display:grid;place-items:center;width:36px;height:36px;border:1px solid #3a4530;border-radius:50%;text-decoration:none;color:#acb69f;font-size:20px}.reveal{opacity:1;transform:none}.js-ready .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s cubic-bezier(.2,.65,.1,1)}.js-ready .reveal.is-revealed{opacity:1;transform:none}
dialog{padding:0;border:0;width:min(980px,calc(100% - 40px));max-height:90svh;border-radius:20px;background:var(--paper);color:var(--ink);box-shadow:0 30px 120px #0008;overflow:auto}dialog[open]{display:grid;grid-template-columns:.9fr 1fr}dialog::backdrop{background:#000b;backdrop-filter:blur(12px)}.dialog-close{position:absolute;right:18px;top:16px;z-index:5;width:36px;height:36px;border-radius:50%;background:#e8e8df;color:#20281b;font-size:25px;line-height:1}.order-art{background:#000;display:flex;align-items:center;min-height:600px;overflow:hidden}.order-art img{width:100%;height:100%;object-fit:contain}.order-art .customer-cover{position:relative;width:70%;height:auto;aspect-ratio:.7071;transform:rotate(-8deg);margin:auto;overflow:hidden;box-shadow:5px 5px 0 #e9e8df,7px 7px 0 #a7a899,18px 25px 35px #0008}.order-art .customer-cover img{width:100%;height:100%;object-fit:cover}.order-art .customer-cover .cover-title{font-size:clamp(11px,1.35vw,17px)}.order-content{padding:55px 38px 35px}.order-content>.eyebrow{font-size:10px;color:#7b896f}.order-content h2{font-weight:400;font-size:46px;letter-spacing:-.065em;line-height:1.02;margin-top:18px}.order-content>p:not(.preview-note){font-size:14px;line-height:1.6;color:#7a8371;margin-top:20px}.cover-picker{padding:0;border:0;margin:28px 0 22px}.cover-picker legend{font-size:12px;margin-bottom:10px;color:#68745d}.cover-picker label{display:flex;align-items:center;gap:12px;border:1px solid #c9cfc0;border-radius:10px;padding:13px;cursor:pointer;margin-top:8px}.cover-picker label:has(input:checked){border-color:#2c7055;background:#eaf1e7}.cover-picker input{accent-color:#205b3e;width:16px;height:16px;margin:0;flex-shrink:0}.cover-picker strong{font-size:14px;font-weight:500;display:block}.cover-picker small{display:block;font-size:10px;color:#7c8971;margin-top:4px}.cover-picker .option-price{font-size:21px;letter-spacing:-.04em;text-align:right;margin-left:auto;display:flex;flex-direction:column-reverse}.cover-picker .option-price small{margin:0 0 2px;font-size:9px;letter-spacing:0}.page-picker{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 20px}.page-picker label{font-size:12px;color:#68745d}.page-picker select{border:1px solid #c9cfc0;border-radius:10px;padding:11px 13px;background:#fff;color:var(--ink);font-size:14px;min-width:150px}.commit-status{font-size:13px;line-height:1.6;color:#426450;margin-top:14px;min-height:20px}.commit-status.error{color:#87533e}#commit-progress{margin:14px auto 0}.order-facts{margin:0;font-size:12px;line-height:1.5}.order-facts>div{display:flex;justify-content:space-between;gap:20px;padding:7px 0}.order-facts dt{color:#829075}.order-facts dd{margin:0;text-align:right}.order-price{border-top:1px solid #d7dccf;padding-top:18px;margin-top:16px;display:flex;justify-content:space-between;gap:20px;align-items:center}.order-price span{font-size:12px;color:#76846a}.order-price strong{font-size:31px;font-weight:400;letter-spacing:-.05em}.preview-note{font-size:10px;line-height:1.7;color:#87937b;margin-top:16px}.order-content .button{margin-top:24px;width:100%;min-height:48px;font-size:13px}.noscript-note{padding:20px;background:var(--mint);color:#000;text-align:center}
@media(min-width:1800px){.hero-visual{left:15%;right:15%}.hero-heading{top:20%}.hero h1{font-size:330px}.story{padding-left:max(var(--gutter),calc((100vw - 1500px)/2));padding-right:max(var(--gutter),calc((100vw - 1500px)/2))}}
@media(max-width:900px){.hero-stage{min-height:600px}.masthead-edition{display:none}.hero-heading{top:23%}.hero-visual{inset:32% 1% 13%}.hero-copy{bottom:16%}.hero-caption{bottom:16%;max-width:170px}.hero-caption p{font-size:12px}.paper{min-height:auto}.paper-heading,.covers-heading{margin-top:85px}.paper-heading .story-copy,.covers-heading .story-copy{padding-right:0;font-size:16px}.paper-image{height:430px}.binding{min-height:820px}.binding-composition{min-height:630px}.binding-copy{width:75%}.binding-image{width:88%;top:22%;bottom:3%;opacity:.7}.binding-copy h2{font-size:clamp(70px,10vw,110px)}.covers{min-height:auto}.covers-image{height:380px}.colour{min-height:850px}.colour-copy{margin-top:130px}.maker{padding-top:110px}.book-stage{margin-top:65px}.book-results{margin-top:90px}.closing{min-height:800px}.site-footer{flex-wrap:wrap;gap:20px}.footer-links{margin-left:0;width:100%;order:3}.back-top{margin-left:auto}.order-content{padding:55px 26px 30px}}
@media(max-width:600px){:root{--gutter:24px}.hero{height:260svh}.hero-stage{min-height:620px}.masthead{height:76px}.brand{font-size:27px}.hero-heading{top:calc(18% - 10px)}.hero-heading .eyebrow{font-size:8px;letter-spacing:.14em;margin-bottom:20px}.hero h1{font-size:20vw;letter-spacing:-.075em}.hero-visual{inset:calc(16% - 40px) -4% calc(37% + 40px)}.hero-copy{bottom:17%}.hero-copy p{font-size:28px}.hero-caption{right:24px;bottom:17%;max-width:125px}.hero-caption .mono{font-size:8px;letter-spacing:.03em}.hero-caption p{font-size:11px;margin-top:9px}.hero-bottom{bottom:27px}.scroll-prompt{font-size:8px;gap:12px}.scroll-line{width:24px}.hero-format{font-size:8px}.story{padding-top:32px}.section-top{align-items:flex-start;gap:16px}.section-number,.section-top .eyebrow{font-size:9px;letter-spacing:.025em}.section-top .eyebrow{text-align:right}.story h2{font-size:70px;letter-spacing:-.075em}.paper-heading,.covers-heading{display:block;margin-top:78px}.paper-heading .story-copy,.covers-heading .story-copy{margin-top:28px;padding-bottom:0;font-size:16px}.paper-image{height:360px;margin-top:35px}.image-footnote{font-size:8px;align-items:flex-start;margin-top:23px}.image-footnote span:first-child{max-width:210px}.binding{min-height:820px;padding-bottom:36px}.binding-composition{display:block;min-height:655px;padding-top:90px}.binding-copy{width:100%;padding:0}.binding-copy h2{font-size:70px}.binding-copy .story-copy{font-size:16px;margin-top:27px}.binding-image{width:125%;height:350px;top:auto;bottom:-30px;right:-60px;opacity:.85}.binding-note{font-size:8px;letter-spacing:.04em;position:relative;z-index:2}.covers{padding-bottom:55px}.covers-image{margin-top:28px;height:275px;max-width:none;width:calc(100% + 48px);margin-left:-24px}.cover-labels{gap:24px;margin-top:0}.cover-labels h3{font-size:24px}.cover-labels .mono{font-size:8px;margin:10px 0 15px}.cover-labels span{font-size:14px}.pricing-note{font-size:10px;margin-top:30px}.colour{min-height:820px}.colour-copy{margin-top:132px}.colour h2{font-size:66px}.colour-copy .story-copy{font-size:17px;margin-top:30px}.colour-image img{object-position:65% center}.colour-shade{background:linear-gradient(90deg,#00120acc,#00180c35),linear-gradient(0deg,#000c,transparent 55%,#0006)}.colour-note{font-size:8px;padding-top:150px}.maker{padding:95px 20px 85px}.maker-intro .eyebrow{font-size:10px}.maker-intro h2{font-size:76px;margin-top:26px;letter-spacing:-.075em}.maker-intro>p{font-size:15px;margin-top:27px}.book-stage{margin:45px -8px 0;padding:16px 0 30px;perspective:900px}.demo-book{aspect-ratio:1.4142}.empty-folio{font-size:6px}.book-lid{padding:10% 5%}.lid-wordmark{font-size:20px}.lid-subline{font-size:5px}.upload-area{margin:8px -5px 0;padding:18px 10px 8px}.button{font-size:14px;min-height:56px;padding:17px 24px}.sample-link{font-size:13px;margin-top:18px}.upload-hint{font-size:11px;margin-top:22px}.upload-status{font-size:12px}.book-results{margin-top:70px}.results-header{align-items:flex-start;display:block;padding-top:26px}.results-header .eyebrow{font-size:9px}.results-header h3{font-size:38px;margin-top:12px}.results-header>p{text-align:left;font-size:10px;margin-top:16px}.spread-stack{margin-top:32px;gap:40px}.spread-item{contain-intrinsic-size:auto 290px}.spread-meta{font-size:8px;margin-top:14px}.spread-surface:after{width:14px;left:calc(50% - 7px)}.shuffle-area{margin-top:60px}.shuffle-area>p:first-child{font-size:16px}.shuffle-status{font-size:9px}.closing{min-height:740px;padding:95px 22px 90px}.closing .eyebrow{font-size:9px}.closing h2{font-size:125px;margin:52px 0}.closing-prices{font-size:12px;line-height:1.8}.closing-prices span{padding:0 5px}.closing-small{font-size:9px}.site-footer{padding:28px 24px;gap:14px}.footer-tagline{font-size:11px}.footer-links a{font-size:11px}.brand img,.footer-brand img{height:18px}.brand img{height:25px}.back-top{width:31px;height:31px;font-size:17px}dialog{width:calc(100% - 24px);max-height:92svh;border-radius:15px}dialog[open]{display:block}.order-art{min-height:0;height:220px}.order-art img{max-height:100%;object-fit:contain}.order-art .customer-cover{height:170px;width:auto}.order-art .customer-cover .cover-title{font-size:9px}.order-content{padding:30px 25px}.order-content h2{font-size:40px}.order-content>p:not(.preview-note){font-size:13px}.dialog-close{top:14px;right:14px}.order-facts{font-size:11px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}.hero{height:100svh;min-height:640px}.hero-stage{position:relative}.hero-frame{opacity:0!important}.hero-frame:nth-child(2){opacity:1!important}.hero-visual{inset:32% 4% 13%}.hero-copy,.hero-heading{opacity:1!important;transform:none!important}.js-ready .reveal{opacity:1;transform:none}.book-lid{display:none}.demo-book,.book-stage.is-open .demo-book{transform:none}.scroll-prompt{display:none}}

/* Clear material colour, readable labels and a contained order preview. */
.paper-image img{mix-blend-mode:normal}.paper-heading .story-copy{padding-right:0}.image-footnote{flex-wrap:wrap}.dialog-open{overflow:hidden}.order-facts dd{max-width:235px}.order-art[data-cover=softcover] .customer-cover{box-shadow:2px 2px 0 #e9e8df,3px 3px 0 #a7a899,18px 25px 35px #0008}
.masthead-edition,.hero-heading .eyebrow,.hero-caption .mono,.scroll-prompt,.hero-format,.image-footnote,.binding-note,.cover-labels .mono,.colour-note,.results-header .eyebrow,.results-header>p,.spread-meta,.shuffle-status,.closing .eyebrow,.closing-small,.site-footer>.mono,.order-content>.eyebrow,.cover-picker small,.cover-picker .option-price small,.preview-note,.section-number,.section-top .eyebrow,.pricing-note{font-size:.75rem}.upload-hint,.order-facts{font-size:.8125rem}.preview-note{color:#657159}.site-footer>.mono{color:#8c9783}
@media(max-width:600px){.hero-heading .eyebrow{font-size:.625rem}.hero-caption .mono,.scroll-prompt,.hero-format{font-size:.625rem}.hero-caption{max-width:138px}.section-top{gap:22px}.image-footnote span:first-child{max-width:none}.image-footnote span:last-child{font-size:.625rem}.paper-heading .story-copy{font-size:15px}.cover-labels .mono{font-size:.625rem}.spread-meta{font-size:.625rem}.order-facts{font-size:.75rem}}
.hero-film{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;pointer-events:none;z-index:2;will-change:transform}.film-ready .hero-film{opacity:1}.film-ready .hero-frame{visibility:hidden}@media(prefers-reduced-motion:reduce){.hero-film{display:none}.film-ready .hero-frame{visibility:visible}.hero-visual{transform:none!important}}
@media(min-width:901px){.hero-frame.is-visible{translate:0 30px}}

/* Quiet line reveals, triggered once as each section enters the viewport. */
.text-reveal .title-line{display:block;padding:.11em .09em .19em;margin:-.11em -.09em -.19em;overflow:clip;perspective:900px}
.text-reveal .title-line-inner{display:block;transform-origin:50% 100%}
.js-ready .text-reveal .title-line-inner{opacity:0;transform:translate3d(0,112%,0) rotateX(-18deg);transition:transform 1.05s cubic-bezier(.16,1,.3,1),opacity .8s ease;transition-delay:calc(var(--line-index) * 140ms);backface-visibility:hidden}
.js-ready .text-reveal.is-revealed .title-line-inner{opacity:1;transform:none}
/* The closing keyframe is a room, not a book on black, so it must not screen-blend. */
.hero-room{mix-blend-mode:normal}
@media(prefers-reduced-motion:reduce){.js-ready .text-reveal .title-line-inner{opacity:1;transform:none;transition:none}.text-reveal .title-line{overflow:visible}}

/* --- Title field + flat cover preview ------------------------------------
   The cover is what the customer is actually buying, so it is shown before the
   spreads, laid flat the way it prints: back cover left, spine, front cover
   right. Spine width scales with the page count and is indicative only — the
   true width depends on page count AND the destination lab, and is only known
   at order time. */
.title-field{max-width:520px;margin:0 auto 46px;text-align:center}
.title-field label{display:block;font-size:13px;letter-spacing:-.02em;color:#6f776b;margin-bottom:12px}
.title-field input{width:100%;border:0;border-bottom:1px solid #c4c8bb;background:transparent;padding:10px 4px;font-family:var(--font);font-size:clamp(20px,2.6vw,30px);font-weight:400;letter-spacing:-.04em;text-align:center;color:var(--ink)}
.title-field input:focus{outline:none;border-bottom-color:#378b75}
.title-field input::placeholder{color:#b9beb0}
.title-field small{display:block;margin-top:10px;font-size:11px;color:#8d9482}
.cover-preview{max-width:1040px;margin:0 auto 70px}
.cover-flat{display:flex;align-items:stretch;box-shadow:0 24px 45px -26px #36422977;background:#fffefa}
.cover-panel{position:relative;aspect-ratio:.7071;overflow:hidden;flex:0 0 auto}
.cover-back{background:#20261f}
.cover-mark{font-family:var(--font);font-size:clamp(9px,1vw,13px);font-weight:500;letter-spacing:-.02em;color:#7d8878}
.cover-spine{flex:0 0 auto;background:#20261f;display:flex;align-items:center;justify-content:center;overflow:hidden}
.cover-spine span{white-space:pre;writing-mode:vertical-rl;font-family:var(--font);font-size:clamp(7px,.75vw,10px);letter-spacing:.02em;color:#cfd4c8;white-space:nowrap;max-height:86%;overflow:hidden}
.cover-front img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
/* Opacity is computed per photo from the measured luminance of this exact
   region, so white type clears the WCAG large-text 3:1 ratio on any cover. */
.cover-scrim{position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(0,0,0,var(--scrim,.45)),transparent)}
/* pre-wrap preserves the customer's own spacing. Default HTML collapses runs
   of spaces, so 'VANILLA   >>>>   SKAI' printed with single gaps while the
   input still showed the original — the preview lied about the cover. */
.cover-title{position:absolute;left:8%;right:8%;bottom:8%;text-align:center;color:#fff;font-family:var(--font);font-size:clamp(13px,1.9vw,24px);font-weight:500;letter-spacing:-.03em;line-height:1.2;word-break:break-word;white-space:pre-wrap}
.cover-legend{display:flex;justify-content:space-between;margin-top:14px;font-size:10px;color:#8d9482;letter-spacing:.08em}
@media(max-width:600px){.title-field{margin-bottom:32px}.cover-preview{margin-bottom:48px}.cover-legend{font-size:8px}}

/* Cover choice — the front cover is the customer's decision, not whichever photo
   happened to upload first. */
.cover-panel[role=button]{cursor:pointer}
.cover-pick{position:absolute;bottom:6%;z-index:5;font-size:9px;letter-spacing:.1em;color:#fff;background:rgba(0,0,0,.55);padding:6px 11px;border-radius:20px;opacity:.9;transition:opacity .2s,background .2s}.cover-back .cover-pick{left:7%}.cover-front .cover-pick{right:7%}
.cover-panel:hover .cover-pick,.cover-panel:focus-visible .cover-pick{opacity:1;background:rgba(0,0,0,.8)}
#back-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.cover-back .cover-mark{position:relative;z-index:2}
.cover-chooser{margin-top:22px;text-align:center}
.cover-chooser p{font-size:10px;color:#8d9482;letter-spacing:.1em;margin-bottom:12px}
.chooser-strip{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}
.chooser-strip button{width:54px;height:72px;padding:0;border:2px solid transparent;border-radius:4px;overflow:hidden;background:#e8e6df;cursor:pointer}
.chooser-strip button.is-chosen{border-color:#378b75}
.chooser-strip button img{width:100%;height:100%;object-fit:cover}
.chooser-strip button.chooser-none{display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:8px;letter-spacing:.06em;color:#7d8878;background:#20261f}
@media(max-width:600px){.chooser-strip button{width:44px;height:59px}}

.chooser-strip .chooser-mode{width:auto;height:auto;padding:9px 14px;font-family:var(--mono);font-size:9px;letter-spacing:.08em;color:#5c6557;background:#eceade;border-radius:20px}
.chooser-strip .chooser-mode.is-chosen{background:#20261f;color:#f3f1e8;border-color:transparent}
.chooser-strip .chooser-swatch{width:34px;height:34px;border-radius:50%}

.cover-panel.is-dropping{outline:3px dashed var(--mint);outline-offset:-6px}
.cover-panel.is-dropping:after{content:'DROP TO SET THIS COVER';position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,9,8,.55);color:#fff;font-family:var(--mono);font-size:9px;letter-spacing:.1em;z-index:4;text-align:center;padding:8%}

/* Back cover mark. MOMENTS is set exactly as the hero wordmark — Inter 200 at
   -.075em, caps — and the 'by miPic' lockup matches the Portrait page: 11px
   lowercase, 5px gap, the shared wordmark inverted to white. */
/* Anchored to the same 8% from the trim edge as the front cover title, so the
   'by miPic' line and the title sit on one horizontal plane when the cover is
   viewed flat. Previously the mark rode on the panel's 7% padding and the two
   were a hair out. */
.cover-backmark{position:absolute;left:8%;right:8%;bottom:8%;z-index:2;display:flex;flex-direction:column;align-items:center;gap:7px}
.cover-backmark__title{font-family:var(--font);font-weight:200;letter-spacing:-.075em;text-transform:uppercase;font-size:clamp(11px,2.18vw,29px);line-height:.85;color:#fff}
.cover-backmark__by{display:flex;align-items:center;gap:7px;font-family:var(--font);font-size:clamp(7px,.82vw,11px);font-weight:400;letter-spacing:.06em;text-transform:lowercase;color:rgba(255,255,255,.85)}
.cover-backmark__by img{height:clamp(12px,1.38vw,18px);width:auto;display:block;filter:brightness(0) invert(1)}
/* When the back carries a photograph the mark needs its own ground, same
   reasoning as the front cover title. */
/* Identical treatment to the front cover: same height, same measured opacity.
   The two panels sit side by side showing the same photograph, so any
   difference between them reads as a mistake. */
.cover-back.has-photo:before{content:'';position:absolute;left:0;right:0;bottom:0;height:42%;background:linear-gradient(to top,rgba(0,0,0,var(--scrim,.45)),transparent);z-index:1}

/* The legend is a control, not a caption — bold, underlined, and it opens the
   same chooser as the panel it names. */
.cover-legend .legend-link{background:none;border:0;padding:0;font-family:var(--mono);font-size:inherit;letter-spacing:.08em;font-weight:700;color:#4c5548;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;cursor:pointer}
.cover-legend .legend-link:hover{color:var(--ink);text-decoration-thickness:2px}

/* The two actions were inline elements: baseline-aligned, so the one carrying an
   icon sat lower than the one without, and with no gap they collided. A flex row
   with stretch gives them equal height, a real gap, and a shared centre line. */
.shuffle-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:14px;margin-top:4px}
.shuffle-actions .button{margin:0}
@media(max-width:600px){.shuffle-actions{gap:10px}.shuffle-actions .button{flex:1 1 auto;min-width:0}}

/* Title / dedication recto and the closing verso. The facing half is the
   unprinted inside cover, shown flat so the preview is honest about what is
   actually printed where. */
.title-field textarea{width:100%;margin-top:26px;border:1px solid #c4c8bb;border-radius:10px;background:transparent;padding:12px 14px;font-family:var(--font);font-size:15px;line-height:1.6;letter-spacing:-.02em;color:var(--ink);resize:vertical}
.title-field textarea:focus{outline:none;border-color:#378b75}
.title-field textarea::placeholder{color:#b9beb0}
.dedication-label{display:block;margin-top:30px;font-size:13px;letter-spacing:-.02em;color:#6f776b}
.spread-surface[data-layout=text-page] .spread-page{display:flex;align-items:center;justify-content:center;padding:14% 13%}
.spread-page.inside-cover{background:#f1efe7}
.title-page{text-align:center;max-width:100%}
.title-page__title{display:block;font-family:var(--font);font-weight:400;font-size:clamp(11px,1.5vw,20px);letter-spacing:-.04em;line-height:1.25;color:var(--ink);white-space:pre-wrap}
.title-page__dedication{margin-top:clamp(8px,1.1vw,16px);font-family:var(--font);font-size:clamp(7px,.82vw,11px);line-height:1.7;letter-spacing:-.01em;color:#5d6557;white-space:pre-wrap}


.reset-link{display:block;margin:18px auto 0;background:none;padding:6px 10px;font-family:var(--font);font-size:13px;letter-spacing:-.02em;color:#7c8574;text-decoration:underline;text-underline-offset:4px;text-decoration-color:#bcc2b2}
.reset-link:hover{color:#1d4130;text-decoration-color:currentColor}

/* When only one page tier fits the collection, the count reads as a plain value
   alongside Format and Paper rather than a select that does nothing when tapped. */
.page-picker #page-fixed{font-size:14px;color:var(--ink);padding:11px 0}

/* Remove one photo from the preview. Hidden until the frame is hovered on a
   pointer device so thirty crosses don't sit over the book at rest; always
   visible where there is no hover, because a control you can only reveal by
   hovering is a control a phone cannot reach. */
.frame-remove{position:absolute;top:5px;right:5px;z-index:6;display:grid;place-items:center;
  width:clamp(20px,2.1vw,27px);height:clamp(20px,2.1vw,27px);padding:0;border:0;border-radius:50%;
  background:#181c15cc;color:#fff;font-size:clamp(13px,1.3vw,17px);line-height:1;cursor:pointer;
  opacity:0;transition:opacity .18s ease,background .18s ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.frame-remove:hover{background:#7d3b2c}
.spread-image:hover .frame-remove,.frame-remove:focus-visible{opacity:1}
/* A photo under the API's 800 x 800 minimum: red outline and its real pixel size, so
   it can be found and removed before Add to basket. The remove button stays visible. */
/* The outline goes on the photo itself, not the frame: a small photo sits centred in a
   larger frame, and outlining the frame boxed the empty paper too. The badge is centred
   in the frame for the same reason, so it always lands on the photo. */
.spread-image.is-too-small img{outline:3px solid #e5484d;outline-offset:-3px}
.spread-image.is-too-small .frame-remove{opacity:1}
.small-flag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;max-width:calc(100% - 12px);padding:6px 9px;border-radius:6px;background:#e5484d;color:#fff;font:600 11px/1.1 Inter,Arial,sans-serif;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 2px 10px #0004;pointer-events:none}
.spread-image.is-flashing img{animation:small-flag-pulse .5s ease-in-out 3}
@keyframes small-flag-pulse{50%{outline-color:#fff;outline-width:5px}}
@media(prefers-reduced-motion:reduce){.spread-image.is-flashing img{animation:none}}
.frame-remove:focus-visible{outline:2px solid #fff;outline-offset:2px}
@media(hover:none){.frame-remove{opacity:1}}
@media(prefers-reduced-motion:reduce){.frame-remove{transition:none}}

/* Shown only when something the customer typed was refused, so it explains a
   change they can see happening to their own text rather than sitting there
   as a permanent warning about a mistake they have not made. */
.field-note{display:block;margin-top:7px;font-size:11px;line-height:1.5;color:#87533e}


/* 'Your photos. Bound.' types on, one character at a time. Revealed by opacity
   so the characters keep their space and a 50px headline never reflows mid-type.
   A touch of rise per character reads as a keystroke landing rather than a
   crossfade. Under reduced motion every character is simply already there. */
/* Each character is its own inline-block, which creates a line-break
   opportunity BETWEEN every pair of letters — so without this a narrow phone
   could break "photos." mid-word. The copy is two short fixed lines split by an
   explicit <br>, so nowrap costs nothing and removes the whole class of fault. */
.hero-copy p{white-space:nowrap;color:#fff}
/* 'Your photos.' white, 'Bound.' grey. The typing animation wraps every character
   in a .ch span, which `.hero-copy span` above would also turn grey; each letter
   takes its colour from where it sits instead. */
.hero-copy .ch{color:inherit}
.hero-copy .ch{display:inline-block;opacity:0;transform:translateY(.14em);transition:opacity .26s ease,transform .34s cubic-bezier(.16,1,.3,1)}
.hero-copy .ch.on{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.hero-copy .ch{opacity:1;transform:none;transition:none}}

/* Footer, matched to the main site's (client/sass/components/_footer.scss): Sequel
   tagline with "Print Button" in a white box, Inter location line, and every link
   on one line in Geist Mono at 80% white. Sequel is the site's own file, served
   from /assets/fonts. */
@font-face{font-family:'Sequel 100 Wide';src:url('/assets/fonts/sequel/sequel100wide-75-bold.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
.site-footer{background:#000;color:#fff;padding-block:40px;align-items:center}
/* Tagline and location: exact values from _footer.scss (.col-summary), including
   its breakpoints ($screen-tablet 650px) and the inherited 1.42857143 line-height.
   The brand block's flex gap is cleared so only these margins space the two lines. */
.footer-brand-block{gap:0}
.footer-tagline{font-family:'Sequel 100 Wide',Impact,sans-serif;font-weight:400;font-size:14px;line-height:1.4;letter-spacing:0;color:#fff;white-space:nowrap;margin:0 0 8px 0}
.footer-tagline span{color:#000;background:#fff;padding:4px 5px;border-radius:0}
.footer-location{font-family:Inter,Arial,sans-serif;font-size:14px;line-height:1.42857143;letter-spacing:.4px;color:rgba(255,255,255,.7);margin:5px 0 0 0}
@media(min-width:650px){.footer-tagline{font-size:15px}}
.footer-links{gap:8px 22px}
.footer-links a{font-family:'Geist Mono','Courier New',monospace;font-size:14px;line-height:24px;letter-spacing:0;color:rgba(255,255,255,.8);text-decoration:none;white-space:nowrap}
.footer-links a:hover{color:#fff;text-decoration:none}
@media(max-width:649px){.footer-location{font-size:12px}}
@media(max-width:600px){.footer-links a{font-size:13px}}
/* Phones: the hero stage hugs its content instead of filling the screen. A 16:9 film
   in a portrait screen left the lower ~40% of a 100svh stage empty, and that black
   band scrolled past before '01 / THE PAPER'. Positions are fixed from the top, in
   px and vw, matching the layout Carl signed off at 390x844:
     title 192px; film 225px down, 108vw wide, so 60.75vw tall (16:9);
     'Your photos. Bound.' and the chapter caption 33px below the film, the same
     visible gap under the open book as MOMENTS sits above the closed spine;
     then room for three caption lines and the scroll-prompt row.
   Title and film were pulled down 50px together on Carl's request; the text and
   the stage height move with them so the spacing underneath is unchanged. */
@media(max-width:600px){
  .hero-stage{height:calc(432px + 60.75vw);min-height:0}
  .hero-heading{top:192px}
  .hero-visual{top:225px;bottom:auto;left:-4%;right:-4%;height:60.75vw}
  .hero-copy,.hero-caption{top:calc(258px + 60.75vw);bottom:auto}
  /* The chapter key ('03 — A WORLD OF YOUR OWN') stays on one line. */
  .hero-caption{max-width:175px}
  .hero-caption .mono{white-space:nowrap}
  /* No lone word on the caption's last line ('A photograph becomes an / object.'). */
  .hero-caption p{text-wrap:balance}
  /* Order dialog: on an iPhone 16 Pro Max the buttons stayed under Safari's
     toolbar and home bar at the end of the scroll. Cap the dialog at the visible
     viewport (dvh follows Safari's toolbars; svh is the fallback), keep the scroll
     inside it, and leave room below the last button. */
  dialog{max-height:calc(92svh);max-height:calc(100dvh - 24px);overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .order-content{padding-bottom:calc(72px + env(safe-area-inset-bottom, 0px))}
}