/* The piece page of the (you’re special to me) box, on the shared museum layout (museum-project.css, copied from its source by the build).
   One block per part of the page, top to bottom. The landing shows the stage alone (about.html?museum=1): the .museum-card block at the end. */

/* The stage: the turning 3D world beside the plaque, on paper under four slow airbrush washes (the Snooze stage's hues).
   It is the Post Office's banner beside it on the landing (owner, 10 Oct 2026: "why cant you make it look as good as the post office
   balance????"): the same grid, gaps, padding and title size at every width. The world's film is cropped to the world itself (its turn's
   whole reach), stands about as tall as the words and is centred against them, so neither side keeps empty room. */
.stage{--hero-w:290px;color:#1f1f24}   /* (the world about as tall as the words beside it, owner 17 Oct 2026) */.stage::before{background:#f4f4f0;filter:blur(24px)}.stage::after{display:none}
.stage .floor{width:100%;min-width:0;max-width:100%;justify-self:center;align-self:center;place-items:center}
/* The hero is the dust bunny's sofa world in 3D, turning: one film holds the picture above its own alpha, drawn by about.js into a
   transparent canvas; the transparent still shows until then (and stays without WebGL or for less motion). */
.stage .floor .art.hero-world{display:block;width:min(100%,var(--hero-w));max-width:100%;margin:auto}
.hero-world{position:relative;width:min(100%,var(--hero-w))}.hero-world img,.hero-world canvas{display:block;width:100%;height:auto;object-fit:contain}.hero-world [hidden]{display:none}   /* the world fills its half of the banner, up to --hero-w wide; its height follows the frame */
.hero-world .hero-source{position:absolute;inset:0;width:100%;height:100%;opacity:0;pointer-events:none}   /* decoded, drawn by the canvas */
.stage .plaque{gap:14px}
.stage .plaque h1{font:700 clamp(30px,3.6vw,46px)/1.02 Syne,Manrope,sans-serif;letter-spacing:-.03em;color:#1f1f24;text-transform:none}   /* the Post Office title's size; the parenthesised title keeps its quiet lowercase */
.stage .plaque .q{font-size:18px;line-height:1.5;color:#555158;max-width:34em}
/* "you matter to me." in the sentence's own colour, in italic, not bold (owner, 10 Oct 2026: "back to normal colour, no more blue",
   "just italic"). */
.stage .plaque .q strong{font-weight:inherit;color:inherit;font-style:italic}
.stage .plaque .m-label,.stage .plaque .meta{color:#706578}
.stage .plaque .piece-medium{display:block;margin:10px 0 16px;font:400 13px/1.5 Manrope,sans-serif}
/* The way in matches the Post Office museum CTA's metrics and placement. */
.stage .plaque .piece-action{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:flex-end;width:100%;margin-top:18px;padding-right:56px;justify-self:stretch}   /* (Explore at the right, 56 px in, as on every card and as live; owner 17 Oct 2026) */
.stage .piece-button{font:600 15px/1 Manrope,sans-serif;letter-spacing:.02em;padding:15px 22px;min-height:0;gap:10px;text-align:start}
.stage .piece-button::after{filter:blur(3.5px)}.stage .piece-button:hover::after{filter:blur(5px)}
@media(min-width:860px){.stage{grid-template-columns:minmax(0,1fr) minmax(0,1fr);justify-content:stretch;gap:26px clamp(32px,4vw,64px);padding:56px clamp(48px,6vw,96px) 52px}.stage .plaque{max-width:460px}}
@media(min-width:641px) and (max-width:859px){.stage{--hero-w:280px;padding:84px 64px 80px}}
@media(max-width:640px){.stage{--hero-w:270px;padding:60px 40px 64px}.stage .plaque .meta,.stage .plaque .piece-medium{font-size:12px}}

/* The washes: Snooze museum-stage hues, opacity and blur (archive/snooze/src/stage.css). */
.stage .piece-blend{position:absolute;inset:22px 14px;z-index:-1;overflow:hidden;pointer-events:none;border-radius:120px 140px 130px 120px / 90px 100px 110px 90px;filter:blur(26px);opacity:.5}
.piece-blend i{position:absolute;width:60%;height:90%;border-radius:50%;filter:blur(40px);animation:piece-colour-drift 22s ease-in-out infinite alternate}
.piece-blend .blue{background:#2d3e8c;left:-20%;top:-30%;opacity:.55;animation-duration:26s}
.piece-blend .citron{background:#e6f27a;right:-15%;top:-20%;opacity:1;animation-duration:19s;animation-delay:-6s}
.piece-blend .green{background:#429a50;left:-5%;bottom:-40%;opacity:.7;animation-duration:23s;animation-delay:-11s}
.piece-blend .pale-blue{background:#9dbde6;right:-10%;bottom:-30%;opacity:1;animation-duration:17s;animation-delay:-3s}
@keyframes piece-colour-drift{0%{transform:translate(0,0) scale(1)}33%{transform:translate(14%,10%) scale(1.15)}66%{transform:translate(-8%,18%) scale(.95)}100%{transform:translate(10%,-8%) scale(1.1)}}
@media(max-width:640px){.stage .piece-blend{inset:10px 26px;border-radius:64px}}
@media(prefers-reduced-motion:reduce){.piece-blend i{animation:none}}

/* Headings are capitals; body copy keeps its natural case. */
main h1,main h2,main h3,.world .sign{text-transform:uppercase}

/* The page's own opening, small: the piece's name and one line, then the boxes at once (owner, 17 Oct 2026: "reduce or even heavily
   remove the top banner", nudake.com's menu as the model). The banner itself (.stage) stays in the file: it is the landing's card
   (?museum=1) and the page's second variant (body.keep-stage). */
html:not(.museum-card) body:not(.keep-stage) .stage,body.keep-stage .opening{display:none}
.opening{display:grid;justify-items:center;text-align:center;gap:10px;padding:46px 0 34px}
.opening .piece-blend,.opening .meta{display:none}
.opening .m-label{margin:0;color:#706578}
.opening h1{margin:0;font:700 clamp(26px,4vw,48px)/1.05 Syne,Manrope,sans-serif;letter-spacing:-.03em;color:#1f1f24;text-transform:none}
/* the name short, its series a quiet hand line under it (owner, 18 Oct 2026: the name and series in one heading was "long, clunky") */
.opening .series,.stage .plaque .series{margin:-4px 0 4px;font:700 clamp(19px,2.1vw,26px)/1.15 Syne,Manrope,sans-serif;letter-spacing:-.02em;color:#1f1f24}
.opening .sub{margin:0;font:400 clamp(15px,1.5vw,18px)/1.5 Manrope,sans-serif;color:#45434b;max-width:30em}
.opening .sub em{font-style:italic}
.stage .plaque .q{font:400 clamp(18px,1.7vw,21px)/1.45 Manrope,sans-serif;color:#45434b;margin:0;max-width:24em}.stage .plaque .q i{font-style:italic;color:#1f1f24}   /* (as the Post Office's card: the question, its marked words set apart; owner 17 Oct 2026) */
.stage .plaque .q strong{font-weight:inherit;color:inherit;font-style:italic}
@media(max-width:640px){.opening{padding:34px 0 26px}}

/* The boxes and How it works: a bar with what it is and the way to all of it, then a ruled grid, two across on a phone, the pictures on
   paper and the names under them. */
.boxes{margin:0 0 56px}
.bar{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1.5px solid #1f1f24;border-bottom:1px solid #d7d1c8;padding:14px 2px}
.bar h2{margin:0;font:600 13px/1.2 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#1f1f24}.bar h2 span{color:#8a8590;letter-spacing:0}
.see-all{font:600 13px/1.2 Manrope,sans-serif;letter-spacing:.1em;text-transform:uppercase;color:#1f1f24;text-decoration:none}.see-all:hover{color:#2d3e8c}
.cells{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.cells>*{border-bottom:1px solid #d7d1c8;border-right:1px solid #d7d1c8;min-width:0}
.cells>:nth-child(3n){border-right:0}
.box-item{display:grid;justify-items:center;align-content:start;text-align:center;gap:4px;color:inherit;text-decoration:none;padding:26px 14px 22px;transition:background .15s}
.box-item:hover{background:rgba(255,253,248,.75)}
.box-item img{width:58%;max-width:150px;height:auto;margin-bottom:10px}
.box-item b{font:400 20px/1.1 var(--hand)}.box-item span{font:400 12.5px/1.4 Manrope,sans-serif;color:var(--soft)}
@media(max-width:760px){
 .boxes{margin:0 -18px 44px}.bar{padding:13px 18px}
 .cells{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cells>:nth-child(3n){border-right:1px solid #d7d1c8}.cells>:nth-child(2n){border-right:0}
 .box-item{padding:22px 10px 18px}.box-item img{width:62%}}

/* the cream band under the opening takes over from the page's paper softly, no edge (owner, 17 Oct 2026: "clean blend, no hard cut") */
.world{background:linear-gradient(rgba(246,239,227,0),var(--paper) 200px)}

/* The AR on film in the opening, under its button: the real thing filmed on a phone, playing while it is in view (owner, 17 Oct 2026:
   "make the user more visualise on what the AR would do"). No heading, it shows itself in action (owner, 19 Oct 2026), and its edge fades
   into the paper as the app's 3D screen does (style.css .scene-wrap: a blurred rounded mask, drawn to the film's shape and
   faded to nothing at its box's edge, since the film is dark where the 3D screen is light). */
.ar-film{width:min(320px,88%);margin:18px auto 0;-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 690'%3E%3Cdefs%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='36' y='36' width='328' height='618' rx='40' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 690'%3E%3Cdefs%3E%3Cfilter id='f' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeGaussianBlur stdDeviation='12'/%3E%3C/filter%3E%3C/defs%3E%3Crect x='36' y='36' width='328' height='618' rx='40' fill='white' filter='url(%23f)'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ar-film video{display:block;width:100%;height:auto}


/* Tender Machine elsewhere: Instagram and TikTok, @tender.machine, at the foot of the page (owner, 16 Oct 2026). */
.m-social{display:flex;align-items:center;justify-content:center;gap:14px;font:500 13px/1 Manrope,sans-serif;color:#55535c}
.m-social a{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;color:#1f1f24;background:rgba(31,31,36,.06);transition:background .15s,transform .15s}
.m-social a:hover{background:rgba(31,31,36,.12);transform:translateY(-1px)}
.m-social svg{width:21px;height:21px}

/* A little look inside: each companion as its 3D model; the drawn phone below plays the chosen window's 3D world. */
.world .sign{font-weight:400;letter-spacing:0}
.showcase-objects{max-width:620px}
.showcase-objects .showcase-object{color:var(--ink);font:400 25px/1.2 var(--hand)}
.showcase-object span,.showcase-object small{display:block}.showcase-object small{font:400 16px/1.4 var(--hand);color:var(--soft);margin-top:8px}
.showcase-object:focus-visible{outline:2px solid #8a6bd6;outline-offset:5px}
.showcase-object .showcase-3d img{display:block;width:100%;height:auto;max-height:210px;object-fit:contain;transition:transform .25s ease}
.showcase-object:hover .showcase-3d img,.showcase-object.on .showcase-3d img{transform:translateY(-4px)}
.showcase-window{max-width:680px;margin:26px auto 0}.showcase-window[hidden]{display:none}
.showcase-window .phone-shell{width:calc(100% - 24px);max-width:380px;margin:8px auto 0;border:2px solid #202024;border-radius:46px;padding:10px}
.showcase-window .phone-top{height:27px;position:relative}.showcase-window .phone-top::after{content:'';position:absolute;left:50%;top:2px;transform:translateX(-50%);width:92px;height:17px;border-radius:12px;background:#202024}
.showcase-window .phone-screen{overflow:hidden;border-radius:25px;isolation:isolate;background:#202024}
.showcase-window iframe{display:block;border:0;width:100%;height:auto;aspect-ratio:400/711.111;background:transparent}
.showcase-window .phone-home{width:98px;height:4px;margin:13px auto 4px;border-radius:4px;background:#202024}
@media(max-width:640px){.world .sign{font-size:30px}.showcase-objects .showcase-object{font-size:22px}.showcase-object small{font-size:14px}}
@media(prefers-reduced-motion:reduce){.showcase-object .showcase-3d img{transition:none}}

/* Who came to mind? */
.world .enter{text-align:center;justify-items:center;gap:22px}.enter h2{font:400 36px/1.15 var(--hand);margin:0}.enter p{margin:0;color:var(--soft)}
.world .piece-button{font:400 23px/1.35 var(--hand)}

.piece-practical{margin-top:70px;border-top:1px solid #d7d1c8;padding-top:35px;display:grid;grid-template-columns:1fr 1.4fr;gap:50px}
.piece-practical h2,.piece-maker h2{font:400 32px/1.2 var(--hand);text-transform:uppercase;margin:18px 0}.piece-practical details{border-bottom:1px solid #d7d1c8;padding:18px 0}.piece-practical summary{font:500 16px/1.5 Manrope,sans-serif;cursor:pointer}.piece-practical p,.piece-maker p{font:400 15px/1.7 Manrope,sans-serif;color:#55535c}.piece-maker{border-top:1px solid #d7d1c8;margin-top:65px;padding-top:35px;max-width:700px}.piece-maker a{font:500 14px/1.5 Manrope,sans-serif;text-underline-offset:4px}.piece-maker p{max-width:44em}
@media(max-width:700px){.piece-practical{grid-template-columns:1fr;gap:10px}}
.world .m-foot{margin-top:80px}

/* The Snooze web button's geometry and behaviour, with Piece 02 colour stops. */
.piece-button{position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;max-width:100%;padding:14px 24px;border:0;border-radius:999px;background:transparent;color:#2d3e8c;font:600 16px/1.35 Manrope,sans-serif;text-align:center;text-decoration:none;box-shadow:none;transition:transform .15s}
.piece-button::after{content:'';position:absolute;inset:-1px;border-radius:inherit;z-index:-1;opacity:.72;filter:blur(4.5px);background:linear-gradient(110deg,#9DBDE6 0%,#E6F27A 30%,#429A50 55%,#9DBDE6 80%,#E6F27A 100%);background-size:200% 100%;animation:piece-button-drift 14s ease-in-out infinite alternate;pointer-events:none}
.piece-button:hover{transform:translateY(-1px)}
.piece-button:hover::after{filter:blur(6px)}
.piece-button:focus-visible{outline:2px solid #2d3e8c;outline-offset:7px}
@keyframes piece-button-drift{from{background-position:0% 50%}to{background-position:100% 50%}}
@media(prefers-reduced-motion:reduce){.piece-button::after{animation:none}.piece-button:hover{transform:none}}

/* The plaque says what it is, who it is for and why, in one line, a few more and the facts (owner, 17 Oct 2026). On the landing's card its
   card is laid out as the Post Office's: the same sizes, Explore in the same place. */
.stage .plaque .sub,.opening .sub{margin:0;font:500 clamp(19px,1.8vw,23px)/1.4 Manrope,sans-serif;color:#1f1f24;max-width:26em}
.stage .plaque .sub em,.opening .sub em{font-style:italic}
.stage .plaque .q,.opening .q{font-size:16px;line-height:1.55;color:#55535c;max-width:32em}
.opening .meta,.stage .plaque .meta{font:400 14px/1.5 Manrope,sans-serif;color:#706578}

/* a phone: every heading and line starts 18 px in, as the rest of the page does */

/* The landing's card (about.html?museum=1): the stage alone, paper around every edge of the blurred paint. */
.museum-card body{background:transparent}.museum-card .m-wrap{max-width:none;padding:40px}.museum-card .m-top,.museum-card .m-foot,.museum-card main> :not(.stage){display:none}.museum-card .stage{margin:0}
.museum-card .stage::before,.museum-card .piece-blend{inset:22px 14px}
@media(max-width:640px){.museum-card,.museum-card body{height:100%}.museum-card .m-wrap{padding:0;height:100vh;box-sizing:border-box}.museum-card main{height:100%}.museum-card .stage{height:100%;box-sizing:border-box;grid-template-rows:minmax(0,1fr) auto;align-content:stretch;padding:72px 64px;gap:26px}.museum-card .stage .floor{height:100%;min-height:0;display:flex;align-items:center;justify-content:center}.museum-card .stage .floor .art.hero-world{height:100%;width:auto;max-width:100%;aspect-ratio:630/952;margin:0}.museum-card .stage .plaque h1{font-size:clamp(28px,8vw,34px)}.museum-card .stage .plaque .q{font-size:clamp(16px,4.3vw,18px)}.museum-card .piece-button{white-space:nowrap}.museum-card .hero-world img,.museum-card .hero-world canvas{width:100%;height:100%}.museum-card .stage::before,.museum-card .stage .piece-blend{inset:40px 26px;border-radius:64px;filter:blur(18px)}.museum-card .stage .plaque h1{font-size:34px}.museum-card .stage .plaque>.piece-action{padding-right:24px;margin-top:14px}}

/* the page in the Post Office page's way (owner, 18 Oct 2026: "the top section should just be [the Post Office's] clean how it works ... add the
   box section right below that before the try it in AR"): the opening's question and its button, then who does what in three pictures */
.opening .sub{font-size:clamp(16px,1.6vw,19px)}.opening .sub i{font-style:italic;color:#1f1f24}
.opening .piece-action{margin-top:8px}
.how{margin:0 0 64px}
.how-head{text-align:center;margin:0 0 28px}.how-head h2{margin:0;font:700 clamp(26px,3.2vw,38px)/1.1 Syne,Manrope,sans-serif;letter-spacing:-.02em;color:#1f1f24;text-transform:none}
.how-head p{margin:8px 0 0;font:400 18px/1.3 var(--hand);color:#5b5760}
.how-steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px}
.how-step{position:relative;min-width:0}
.how-step+.how-step::before{content:'→';position:absolute;left:-34px;top:min(14vw,150px);font:400 24px/1 Manrope,sans-serif;color:#8a8590}
.how-step figure{margin:0 0 14px;aspect-ratio:1;border-radius:22px;overflow:hidden;background:#ece9e2}.how-step figure img{display:block;width:100%;height:100%;object-fit:cover}
.how-step .who{display:inline-block;font:600 11px/1 Manrope,sans-serif;letter-spacing:.14em;text-transform:uppercase;background:#1f1f24;color:#fffdf8;border-radius:999px;padding:6px 11px}
.how-step h3{font:400 23px/1.15 var(--hand);margin:10px 0 4px}.how-step p{font:400 14.5px/1.45 Manrope,sans-serif;margin:0;color:#55535c}
.how .other{margin:26px 0 0;text-align:center;font:400 14.5px/1.5 Manrope,sans-serif;color:#5b5760}.how .other a{color:#2d3e8c;text-underline-offset:4px}
@media(max-width:760px){
 .how{margin:0 -18px 48px}.how-head{padding:0 18px}.how .other{padding:0 18px}
 .how-steps{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:76%;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0 18px 4px;scroll-padding:0 18px}
 .how-steps::-webkit-scrollbar{display:none}.how-step{scroll-snap-align:start}.how-step+.how-step::before{display:none}}