/* ── Page scenes (every inner page with a scene) ─────────
   A small illustrated scene at the top of an inner page, in the same world
   as the homepage. The sky palettes and cat classes come from world.css;
   scene.js draws the scene and sets data-sky from the visitor's local time
   (or ?sky=dawn|day|golden|night). */

.scene{
  position:relative; isolation:isolate; overflow:hidden;
  padding:0; color:var(--w-ink); background:var(--sky-low);
}
.scene[data-sky="day"]   {--stone:#D9CDBB; --stone2:#C8BBA6; --chalk:rgba(40,52,68,.72); --sill:#B98C5E; --sill2:#9C7246; --screen-glow:0;}
.scene[data-sky="dawn"]  {--stone:#D3BEC2; --stone2:#C0A9AF; --chalk:rgba(46,38,56,.72); --sill:#B08470; --sill2:#946A58; --screen-glow:.2;}
.scene[data-sky="golden"]{--stone:#DDB48C; --stone2:#C99D74; --chalk:rgba(58,38,24,.75); --sill:#B07A48; --sill2:#91602F; --screen-glow:.3;}
.scene[data-sky="night"] {--stone:#3C4470; --stone2:#333A61; --chalk:rgba(242,235,221,.78); --sill:#4C3F55; --sill2:#3A3045; --screen-glow:1;}

.scene .world-sun{
  left:82%; bottom:calc(100% - 150px);
}
.scene[data-sky="golden"] .world-sun{left:91%; bottom:300px;}
.scene[data-sky="dawn"] .world-sun{left:12%; bottom:170px;}
.scene[data-sky="night"] .world-sun{
  background:radial-gradient(circle at 38% 36%, #FFFDF4 0 30%, var(--sun-core) 52%, #DCD6C4 66%, rgba(255,255,255,0) 71%);
}
.scene[data-sky="night"] .world-stars{opacity:1;}
.scene[data-sky="dawn"] .world-stars{opacity:.25;}
.scene[data-sky="night"] .world-bird, .scene[data-sky="night"] .world-birds{display:none;}

.scene-defs{position:absolute; width:0; height:0; overflow:hidden;}
.scene-skyline{position:absolute; left:0; bottom:0; width:100%; height:190px; z-index:-3; display:block;}
.scene .cat-hit{cursor:pointer;}

.scene-copy{position:relative; z-index:3; padding-top:clamp(36px, 7vh, 72px);}
.scene-copy > *{max-width:620px;}
.scene .eyebrow{color:var(--w-ink2); text-shadow:0 0 16px var(--w-glow);}
.scene .page-title{color:var(--w-ink); text-shadow:0 0 28px var(--w-glow);}
.scene .lede{color:var(--w-ink2); text-shadow:0 0 18px var(--w-glow), 0 0 4px var(--w-glow);}
.scene-hint{
  display:flex; align-items:center; gap:8px; margin-top:16px;
  font-size:14px; font-weight:600; color:var(--w-ink2); text-shadow:0 0 14px var(--w-glow);
}
.scene-hint svg{flex-shrink:0; animation:w-nudge 2.4s ease-in-out infinite;}

/* The low stone wall the scene stands on, with chalk labels */
.scene-wall{
  position:relative; z-index:2; height:58px;
  background-color:var(--stone);
  background-image:
    linear-gradient(180deg, rgba(255,255,255,.22) 0 3px, rgba(0,0,0,.08) 3px 6px, transparent 6px),
    linear-gradient(90deg, transparent 0 calc(100% - 2px), var(--stone2) calc(100% - 2px)),
    linear-gradient(180deg, transparent 0 28px, var(--stone2) 28px 30px, transparent 30px);
  background-size:100% 100%, 92px 29px, 100% 100%;
  background-position:0 0, 46px 0, 0 0;
}

/* ── Chalk labels on the scene wall (Get involved) ───── */
.how-labels{
  position:absolute; inset:0; display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(4px, 2vw, 28px); align-items:center; pointer-events:none;
}
.how-label{
  font-family:'Caveat',cursive; font-weight:600; font-size:clamp(20px, 2.6vw, 30px); line-height:1;
  color:var(--chalk); text-align:center; transform:rotate(-2deg); opacity:.55;
  transition:opacity .4s ease, transform .4s ease;
}
.how-label b{font-weight:600; margin-right:4px;}
.how-label.on{opacity:1; transform:rotate(-2deg) scale(1.08);}

/* Shared one-shot animations (Get involved flash, Live map pins) */
@keyframes how-flash{0%{opacity:.95;} 100%{opacity:0;}}
@keyframes how-drop{0%{transform:translateY(-240px); opacity:1;} 100%{transform:translateY(0); opacity:1;}}
@keyframes how-ripple{0%{transform:scale(.2); opacity:.9;} 100%{transform:scale(2.4); opacity:0;}}

/* ── Download: a cat asleep by the phone on a windowsill ─ */
.dl-scene{display:flex; flex-direction:column; min-height:min(640px, calc(100svh - 66px));}
.dl-scene > .wrap{width:100%;}
.dl-scene .store-row{margin-top:26px;}
.scene .store-btn .lines{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.dl-art{
  position:absolute; z-index:1; right:max(0px, calc(50% - 600px)); bottom:40px;
  width:min(640px, 58vw); height:auto; overflow:visible;
}
.dl-spacer{flex:1 0 120px;}
.dl-sill{
  position:relative; z-index:2; height:40px; margin-top:auto;
  background:linear-gradient(180deg, var(--sill) 0 12px, var(--sill2) 12px 100%);
  box-shadow:0 -1px 0 rgba(255,255,255,.25) inset, 0 -8px 18px rgba(0,0,0,.12);
}
.dl-glow{opacity:var(--screen-glow);}
.dl-toast{transform:translateY(-70px); transition:transform .55s cubic-bezier(.2,1.4,.4,1);}
.scene.is-toast .dl-toast{transform:translateY(0);}
.dl-newprint{transform-box:fill-box; transform-origin:center;}
.dl-newprint.pop{animation:dl-pop .6s cubic-bezier(.3,1.6,.5,1);}
@keyframes dl-pop{0%{transform:scale(.4); opacity:0;} 100%{transform:scale(1); opacity:1;}}
.dl-count{font-family:'Fraunces',Georgia,serif; font-weight:600;}
.dl-leaf{transform-box:fill-box; transform-origin:50% 100%; animation:dl-leaf 4.6s ease-in-out infinite alternate; animation-delay:var(--dl,0s);}
@keyframes dl-leaf{from{transform:rotate(-3deg);} to{transform:rotate(4deg);}}
.dl-phone{cursor:pointer;}

/* Shared by the newer scenes: a wide art strip standing on the wall, and
   chalk written on the wall itself. */
.scene-art{display:block; position:relative; z-index:2; width:100%; height:auto; overflow:visible; margin-top:clamp(10px, 3vh, 28px);}
.scene-chalk{
  height:100%; display:flex; align-items:center; justify-content:center; gap:18px;
  font-family:'Caveat',cursive; font-weight:600; font-size:clamp(22px, 2.6vw, 30px); line-height:1;
  color:var(--chalk); transform:rotate(-1deg);
}
.chalk-pop{animation:chalk-pop .5s cubic-bezier(.3,1.6,.5,1);}
@keyframes chalk-pop{0%{transform:scale(.6); opacity:0;} 100%{transform:scale(1); opacity:1;}}

/* ── About: count the cats in the shadows ─────── */
.ab-tally svg{display:block; height:30px; width:auto; overflow:visible;}
.ab-tally path{stroke:var(--chalk); stroke-width:3; stroke-linecap:round; fill:none;}
.ab-tally path.new{stroke-dasharray:40; stroke-dashoffset:40; animation:ab-chalk .35s ease-out forwards;}
@keyframes ab-chalk{to{stroke-dashoffset:0;}}
.ab-cat{transition:filter .9s ease;}
.ab-cat:not(.counted){filter:brightness(.16) saturate(.3);}
.ab-q{font-family:'Caveat',cursive; font-weight:600; font-size:34px; fill:var(--chalk); transition:opacity .4s ease; animation:ab-q 2.6s ease-in-out infinite alternate;}
@keyframes ab-q{from{transform:translateY(0);} to{transform:translateY(-6px);}}
.ab-cat.counted + .ab-q{opacity:0;}
.ab-num{opacity:0; transform:translateY(8px); transition:opacity .4s ease .3s, transform .5s cubic-bezier(.2,1.5,.4,1) .3s;}
.ab-num text{font-family:'Caveat',cursive; font-weight:600; font-size:26px; fill:#2B2622;}
.ab-cat.counted ~ .ab-num{opacity:1; transform:translateY(0);}

/* ── Shared pieces under the scenes ─────────────────────
   A handwritten title, a short line, taped photo prints with a drawn picture
   (scene.js draws them with drawPrint) and a street-sign button. */
.short-line{max-width:520px; margin:16px auto 0; font-size:16px; color:var(--ink2); text-align:center;}
.hand-title{font-family:'Caveat',cursive; font-weight:600; font-size:clamp(32px,4.2vw,46px); color:var(--ink); transform:rotate(-1.5deg);}
.tprints{list-style:none; margin:36px auto 0; padding:0; max-width:900px; display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(18px,3vw,40px);}
.tprints-2{grid-template-columns:repeat(2,1fr); max-width:620px;}
.tprints p{margin-top:18px; font-size:15px; color:var(--ink2); max-width:250px; margin-inline:auto;}
.tprint{position:relative; margin:0; padding:10px 10px 0; background:#FFFDF8; border-radius:2px; box-shadow:var(--shadow-print); transform:rotate(var(--tilt,0deg)); transition:transform .4s cubic-bezier(.3,1.4,.5,1);}
.tprint:hover{transform:rotate(0deg) translateY(-4px);}
.tprint::before{content:""; position:absolute; left:50%; top:-12px; width:74px; height:24px; margin-left:-37px; background:rgba(241,186,85,.55); transform:rotate(-3deg); box-shadow:0 1px 2px rgba(0,0,0,.08);}
.tprint svg{display:block; width:100%; height:auto; border-radius:1px;}
.tprint figcaption{font-family:'Caveat',cursive; font-weight:600; font-size:24px; line-height:1; color:#2B2622; padding:10px 4px 12px;}



/* How it works, under the scene */

/* A pinned paper note (Get involved): handwritten title, one line, a button */
.pnote{
  position:relative; padding:34px 28px 28px; background:#FFFDF8; color:#2B2622; border-radius:3px;
  box-shadow:0 14px 26px rgba(20,12,6,.22); transform:rotate(var(--tilt,0deg)); text-align:center; scroll-margin-top:110px;
}
.pnote::before{content:""; position:absolute; left:50%; top:10px; width:16px; height:16px; margin-left:-8px; border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #F08A6A, #C8433E 70%); box-shadow:0 3px 4px rgba(0,0,0,.3);}
.pnote h2{font-family:'Caveat',cursive; font-weight:600; font-size:clamp(28px,3.2vw,36px); line-height:1.05; color:#2B2622;}
.pnote p{margin:12px auto 0; max-width:300px; font-size:15px; color:#5A5048;}
.pnote-stamp{position:absolute; right:16px; bottom:18px; padding:2px 8px; border:2px solid #C8433E; border-radius:4px; color:#C8433E;
  font-family:'Caveat',cursive; font-weight:600; font-size:18px; line-height:1.2; transform:rotate(8deg); opacity:.85;}

/* Get involved, under the scene */
.gi-play{padding:clamp(56px,8vw,96px) 0 clamp(56px,8vw,96px); text-align:center; scroll-margin-top:80px;}
.gi-play .sign-btn{margin-top:40px;}
/* The road ahead: world.css's night-path, in this page's own colours */
.gi-road{padding:clamp(56px,8vw,96px) 0; border-top:1px solid var(--rule); scroll-margin-top:60px; text-align:center;}
.gi-road .night-road{padding-top:0;}
.gi-road .night-road > h2{margin:10px auto 0;}
.gi-road-lede{max-width:580px; margin:16px auto 0; font-size:16.5px; line-height:1.6; color:var(--ink2);}
.gi-road .night-path{text-align:left; max-width:980px; margin-inline:auto;}
.gi-road .night-path::before{border-color:var(--ink4);}
.gi-road .night-node{background:var(--paper); box-shadow:inset 0 0 0 2px var(--ink4);}
.gi-road .night-path li.lit .night-node{background:var(--ochre); box-shadow:0 0 0 6px var(--ochre-tint), 0 0 18px 4px var(--ochre-tint); animation:none;}
.gi-road .night-pill{color:var(--ink3); box-shadow:inset 0 0 0 1px var(--ink4);}
.gi-road .night-path li.lit .night-pill{background:var(--ochre); color:var(--ochre-ink);}
.gi-road .night-path h3{color:var(--ink);}
.gi-road .night-path p{color:var(--ink2);}
.brick-wall{padding:clamp(48px,7vw,80px) 0; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='58'%3E%3Cpath d='M0 28H92M0 57H92M1 0V28M47 29V57' stroke='%23C8BBA6' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/92px 58px, #D9CDBB;}
:root[data-theme="dark"] .brick-wall{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='58'%3E%3Cpath d='M0 28H92M0 57H92M1 0V28M47 29V57' stroke='%23333A61' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/92px 58px, #3C4470;}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .brick-wall{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='92' height='58'%3E%3Cpath d='M0 28H92M0 57H92M1 0V28M47 29V57' stroke='%23333A61' stroke-width='2' fill='none'/%3E%3C/svg%3E") 0 0/92px 58px, #3C4470;}
}
.gi-board{display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px,4vw,56px); max-width:880px;}
.gi-flash{opacity:0; animation:gi-flash 4s ease-out infinite;}
@keyframes gi-flash{0%,62%{opacity:0;} 64%{opacity:.9;} 80%,100%{opacity:0;}}
.gi-finder{animation:gi-finder 4s ease-in-out infinite; transform-box:view-box; transform-origin:100px 78px;}
@keyframes gi-finder{0%{transform:scale(1.15); opacity:0;} 30%,90%{transform:scale(1); opacity:1;} 100%{opacity:0;}}
.gi-tag{font-size:7px; font-weight:800; fill:#2B2622;}
.gi-sticker{animation:gi-sticker 3.2s ease-in-out infinite alternate;}
@keyframes gi-sticker{from{transform:translate(100px,34px) rotate(-4deg);} to{transform:translate(100px,34px) rotate(3deg);}}
.gi-like{animation:gi-like 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
@keyframes gi-like{0%,100%{transform:scale(1);} 20%{transform:scale(1.25);} 40%{transform:scale(1);}}

/* Live map, under the scene: the live map as a big taped print */
.mp-live{padding:clamp(56px,8vw,96px) 0 0; text-align:center;}
.mp-live .cat-map-wrap{margin-top:34px; padding:12px; border:0; border-radius:3px; background:#FFFDF8; box-shadow:var(--shadow-print); overflow:visible; text-align:left;}
.mp-live .cat-map-wrap::before, .mp-live .cat-map-wrap::after{content:""; position:absolute; z-index:600; top:-12px; width:90px; height:26px; background:rgba(241,186,85,.55); box-shadow:0 1px 2px rgba(0,0,0,.08); pointer-events:none;}
.mp-live .cat-map-wrap::before{left:-18px; transform:rotate(-24deg);}
.mp-live .cat-map-wrap::after{right:-18px; transform:rotate(24deg);}
.mp-live .cat-map{border-radius:2px; overflow:hidden;}
.mp-live .short-line{margin-top:22px; max-width:640px;}
.mp-fine{margin-top:6px; font-size:13.5px; color:var(--ink3);}
.mp-live .map-panel{text-align:left;}
.mp-add{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,110px); text-align:center;}
.mp-add-art{display:block; width:280px; height:auto; margin:0 auto 8px; overflow:visible;}
.mp-add .sign-btn{margin-top:26px;}
.mp-pin{animation:mp-pin 3.2s cubic-bezier(.3,1.4,.5,1) infinite;}
@keyframes mp-pin{0%{transform:translateY(-60px); opacity:0;} 18%{transform:translateY(0); opacity:1;} 85%{opacity:1;} 100%{opacity:0;}}
.mp-ripple{opacity:0; animation:mp-ripple 3.2s ease-out infinite; transform-box:fill-box; transform-origin:center;}
@keyframes mp-ripple{0%,16%{opacity:0; transform:scale(.4);} 20%{opacity:.9;} 50%,100%{opacity:0; transform:scale(2.6);}}

/* Awareness days, under the scene: ten tear-off calendar pages */
.dy-year{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,110px); text-align:center;}
.dy-star{color:#E2A93B;}
.days-grid{list-style:none; margin:40px auto 0; padding:0; max-width:1100px; display:grid; grid-template-columns:repeat(5,1fr); gap:34px 22px; text-align:center;}
.day-row{
  position:relative; display:flex; flex-direction:column; align-items:center; padding:30px 14px 18px;
  background:#FFFDF8; color:#2B2622; border-radius:4px; box-shadow:var(--shadow-print);
  transform:rotate(-1.2deg); transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.day-row:nth-child(even){transform:rotate(1.4deg);}
.day-row:nth-child(3n){transform:rotate(-.4deg);}
.day-row:hover{transform:rotate(0) translateY(-4px);}
/* The red top band with its two binding rings */
.day-row::before{content:""; position:absolute; left:0; right:0; top:0; height:16px; border-radius:4px 4px 0 0; background:#C8433E;}
.day-row::after{content:""; position:absolute; top:-7px; left:50%; width:58px; height:14px; margin-left:-29px;
  background:radial-gradient(circle at 7px 7px, #6E6A66 5px, transparent 5.5px) 0 0/44px 14px repeat-x;}
.day-date{font-family:'Caveat',cursive; font-weight:600; font-size:30px; line-height:1; color:#C8433E;}
.day-name{display:block; margin-top:10px; font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:15.5px; line-height:1.2; color:#2B2622;}
.day-note{display:block; margin-top:6px; font-size:13px; line-height:1.4; color:#6B625A;}
.day-tag{display:inline-block; vertical-align:2px; margin-left:4px; padding:0 6px; border-radius:20px; background:#EEE7DC; color:#7A7067; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:10px; font-weight:800; letter-spacing:.5px;}
/* The biggest days get a gold star sticker */
.day-row.key .day-date::after{content:"\2605"; position:absolute; z-index:1; right:-12px; top:-12px; width:32px; height:32px; border-radius:50%; background:#F1BA55; color:#FFFDF8; font-size:18px; line-height:32px; text-align:center; transform:rotate(12deg); box-shadow:0 3px 6px rgba(0,0,0,.18);}
/* The next one coming up (marked by scene.js) */
.day-row.next{box-shadow:0 0 0 3px var(--ochre), var(--shadow-print);}
.day-next{display:inline-block; margin-left:6px; padding:2px 8px; border-radius:20px; background:var(--ochre); color:var(--ochre-ink); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif; font-size:10px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; vertical-align:2px;}
.dy-end{margin-top:44px;}
.dy-end a{color:var(--ochre); font-weight:700;}

/* Download, under the scene: the waitlist on a pinned note */
.dl-note{max-width:520px; margin:0 auto; padding-bottom:22px;}
.dl-note .example-note{color:#7A7067; font-size:13px;}
.dl-note .example-note b{color:#5A5048; border-bottom-color:#C9BFB0;}
.dl-note .example-note a{color:#A87B2E;}
/* Like the homepage ending: the waitlist's first note is the line under the title, the consent note is quieter */
.dl-note > .example-note{font-size:15.5px; color:#5A5048; margin-top:12px; max-width:400px;}
.dl-note > .example-note b{color:#2F6B4F; border-bottom:0; cursor:auto;}
.dl-note .waitlist-form .example-note{font-size:12px; opacity:.8;}
.dl-note .waitlist-form input{background:#FFFFFF; color:#2B2622; border-color:#D9CDBB;}
.dl-note .pnote-stamp{bottom:auto; top:-14px; right:-10px; background:#FFFDF8;}
.dl-note .btn-primary{background:#2F6B4F; color:#F4F0E6; box-shadow:0 4px 0 #1F4A36;}
.dl-more{padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,110px); text-align:center;}
.dl-more .sign-btn{margin-top:22px;}
.lost-home{margin-top:22px;}

/* ── A shared cat (cat.php, /c/<id>): its photo taped up under the sky ── */
.cat-hero{position:relative; z-index:3; text-align:center; padding:clamp(48px,8vh,84px) 0 clamp(150px,20vh,200px);}
.cat-print{width:min(340px,82%); margin:0 auto;}
.cat-print img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:1px; background:#EFE7DA;}
.cat-print figcaption{font-size:34px; padding:12px 4px 14px;}
.cat-paws{position:absolute; right:-14px; top:-14px; transform:rotate(6deg); padding:6px 12px; border-radius:999px;
  background:#E07A3F; color:#FFF8EE; font-weight:700; font-size:14px; box-shadow:0 6px 14px rgba(20,12,6,.25);}
.cat-tagline{max-width:520px; margin:26px auto 0; font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:clamp(19px,2.4vw,23px);
  color:var(--w-ink); text-shadow:0 0 18px var(--w-glow), 0 0 4px var(--w-glow);}
.cat-meta{margin-top:26px; font-size:15px; color:var(--w-ink2); text-shadow:0 0 14px var(--w-glow);}
.cat-tagline + .cat-meta{margin-top:8px;}
.cat-wait .pnote h2{max-width:380px; margin-inline:auto;}
.cat-more{padding:clamp(56px,8vw,96px) 0; text-align:center;}
.cat-more .tprints{max-width:760px; grid-template-columns:repeat(3,minmax(0,1fr));}
.cat-more .tprint{display:block; text-decoration:none;}
.cat-more .tprint img{display:block; width:100%; aspect-ratio:1; object-fit:cover; border-radius:1px; background:#EFE7DA;}
.tprint-name{display:block; font-family:'Caveat',cursive; font-weight:600; font-size:24px; line-height:1; color:#2B2622;
  padding:10px 4px 12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
@media (max-width:720px){
  .cat-more .tprints{grid-template-columns:repeat(3,minmax(0,1fr)); max-width:none; gap:14px;}
  .cat-hero{padding-bottom:110px;}
  .cat-more .tprint{padding:6px 6px 0;}
  .cat-more .tprint::before{width:44px; height:16px; margin-left:-22px; top:-8px;}
  .tprint-name{font-size:18px; padding:7px 2px 9px;}
  .cat-print figcaption{font-size:28px;}
}

/* ── A lost pet (lost.php, /lost/<id>): the cat page's print with a stamp, the area on a map ── */
.pl-stamp{position:absolute; left:-16px; top:-16px; transform:rotate(-8deg); padding:4px 12px; border:3px solid #C8433E; border-radius:6px;
  background:#FFFDF8; color:#C8433E; font-family:'Caveat',cursive; font-weight:700; font-size:26px; line-height:1; text-transform:uppercase;
  box-shadow:0 6px 14px rgba(20,12,6,.2);}
.pl-nophoto{display:grid; place-items:center; aspect-ratio:1; border-radius:1px; background:#EFE7DA; font-size:64px;}
.pl-stamp-home{border-color:#2F6B4F; color:#2F6B4F;}
.pl-share{display:flex; flex-wrap:wrap; gap:10px; justify-content:center; margin-top:22px;}
.pl-share .sign-btn{margin-top:0;}
.pl-status{min-height:1.4em; margin-top:10px; font-size:14px; color:var(--w-ink2); text-shadow:0 0 14px var(--w-glow); overflow-wrap:anywhere;}
.pl-where{padding:clamp(48px,7vw,80px) 0; text-align:center;}
.pl-map{height:min(60vh,420px); max-width:760px; margin:24px auto 0; border-radius:4px; box-shadow:var(--shadow-print); background:#EFE7DA;}
.pl-map-note{margin-top:12px; font-size:14px; color:var(--ink2);}
.pl-note{max-width:560px;}
.pl-form{margin-top:18px; text-align:left;}
.pl-kinds{display:flex; flex-wrap:wrap; gap:8px; justify-content:center;}
.pl-kinds label{display:flex; align-items:center; gap:6px; padding:8px 14px; border:1.5px solid #D9CDBB; border-radius:999px; font-size:14.5px; font-weight:600; color:#2B2622; cursor:pointer;}
.pl-kinds label:has(input:checked){border-color:#2F6B4F; background:#E6EFE9;}
.pl-label{display:block; margin-top:16px; font-size:14px; font-weight:700; color:#2B2622;}
.pl-form p.pl-label{max-width:none; margin:16px 0 0;}
.pl-label span{font-weight:400; color:#7A7067;}
.pl-pick{height:260px; margin-top:8px; border-radius:6px; border:1px solid #D9CDBB; background:#EFE7DA;}
.pl-here{margin-top:8px; padding:6px 12px; border:1px solid #D9CDBB; border-radius:999px; background:#FFFFFF; color:#2F6B4F; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;}
.pl-form select, .pl-form textarea, .pl-form input[name="contact"]{display:block; width:100%; margin-top:6px; padding:10px 12px; border:1px solid #D9CDBB; border-radius:10px; background:#FFFFFF; color:#2B2622; font:inherit; font-size:15px;}
.pl-form textarea{resize:vertical;}
.pl-form .btn{display:block; width:100%; margin-top:18px;}
.pl-form .form-status{text-align:center;}
.pl-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.pl-thanks h2{margin-top:10px;}
.pl-report{margin-top:22px; text-align:center; font-size:13px; color:#5A5048;}
.pl-report a{color:#5A5048; font-weight:700;}
:root[data-theme="dark"] .pl-report, :root[data-theme="dark"] .pl-report a{color:#C9BFB0;}
@media (prefers-color-scheme:dark){ :root:not([data-theme="light"]) .pl-report, :root:not([data-theme="light"]) .pl-report a{color:#C9BFB0;} }

@media (max-width:720px){
  .pl-stamp{left:-8px; top:-12px; font-size:22px;}
}

/* ── Lost & Found (lost-and-found.html): every lost pet on a map, prints of those in view ── */
.laf-live, .laf-home{padding:clamp(48px,7vw,80px) 0 0; text-align:center;}
.laf-home{padding-bottom:clamp(24px,4vw,40px);}
.laf-live + .laf-home{padding-top:0;}
.laf-map{height:min(60vh,460px); max-width:900px; margin:24px auto 0; border-radius:4px; box-shadow:var(--shadow-print); background:#EFE7DA;}
.laf-bar{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:center; margin-top:14px;}
.laf-bar .pl-here{margin-top:0;}
.laf-status{font-size:15px; font-weight:600; color:var(--ink);}
.laf-prints{display:flex; flex-wrap:wrap; justify-content:center; margin-bottom:clamp(48px,7vw,80px);}
.laf-prints > li{width:min(190px,calc(50% - 12px));}
.laf-prints:empty{display:none;}
.laf-print{display:block; text-decoration:none;}
.laf-print img, .laf-print .pl-nophoto{display:grid; width:100%; aspect-ratio:1; object-fit:cover; border-radius:1px; background:#EFE7DA;}
.laf-print .tprint-name{padding-bottom:4px;}
.laf-line{display:block; padding:0 4px 12px; font-size:13px; line-height:1.3; color:#5A5048;}
.leaflet-container a.laf-pop{display:block; width:180px; color:#2B2622; text-decoration:none; text-align:center;}
.laf-pop img, .laf-pop .pl-nophoto{display:grid; width:100%; aspect-ratio:1; object-fit:cover; border-radius:4px; font-size:40px;}
.laf-pop b{display:block; margin-top:8px; font-family:'Caveat',cursive; font-size:24px; font-weight:600; line-height:1;}
.laf-pop span{display:block; margin-top:4px; font-size:12.5px; color:#5A5048;}
.laf-pop .laf-pop-go{margin-top:8px; font-weight:700; color:#C8433E;}
.laf-notes{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(24px,4vw,48px); align-items:start;}
.laf-note{max-width:none;}
.laf-steps{margin:16px 0 0; padding-left:22px; text-align:left; font-size:15px; line-height:1.5; color:#5A5048;}
.laf-steps li + li{margin-top:10px;}
.laf-steps b{color:#2B2622;}
.laf-steps a{color:#2F6B4F; font-weight:700;}
.laf-note .btn{display:inline-block; margin-top:20px;}
@media (max-width:860px){
  .laf-prints{gap:18px 24px;}
  .laf-notes{grid-template-columns:1fr;}
}

/* About, under the scene: the mission, the Cyprus board, three prints */
.ab-plan{padding:clamp(48px,8vw,88px) 0 0; text-align:center;}
.ab-mission{max-width:760px; margin:0 auto; font-family:'Caveat',cursive; font-weight:600; font-size:clamp(30px,4.2vw,46px); line-height:1.1; color:var(--ink);}
.ab-mission span{color:var(--ochre);}

.ab-cyprus{padding:clamp(48px,7vw,80px) 0 0;}
.ab-board{
  --chalk-ink:rgba(244,240,230,.92);
  max-width:860px; margin:0 auto; padding:clamp(24px,4vw,40px) clamp(20px,4vw,44px) 28px;
  border:10px solid #8A5A35; border-radius:8px; color:var(--chalk-ink);
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,255,255,.06), transparent 60%),
    radial-gradient(ellipse at 85% 90%, rgba(255,255,255,.05), transparent 55%),
    #2E3B37;
  box-shadow:inset 0 0 0 2px #6E4526, inset 0 0 40px rgba(0,0,0,.35), var(--shadow-card);
  font-family:'Caveat',cursive; font-weight:600;
}
.ab-board-eyebrow{font-size:24px; opacity:.75;}
.ab-board-title{font-family:'Caveat',cursive; font-weight:600; font-size:clamp(32px,4.4vw,48px); line-height:1.05; color:var(--chalk-ink); margin-bottom:22px;}
.ab-row{display:grid; grid-template-columns:230px 1fr; align-items:center; gap:18px; padding:12px 0; border-top:1.5px dashed rgba(244,240,230,.22);}
.ab-num-big{font-size:clamp(40px,5vw,54px); line-height:.95;}
.ab-num-big small{display:block; font-size:22px; opacity:.75; margin-top:4px;}
.ab-icons{display:flex; flex-wrap:wrap; align-items:center; gap:6px 8px;}
.ab-mark{width:32px; height:34px; overflow:visible; fill:none; stroke:var(--chalk-ink); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
  opacity:0; transform:translateY(6px) scale(.7); transition:opacity .35s ease, transform .45s cubic-bezier(.3,1.6,.5,1); transition-delay:calc(var(--i) * 70ms);}
.ab-mark.maybe{stroke-dasharray:3 4; opacity:0;}
.ab-board.on .ab-mark{opacity:1; transform:none;}
.ab-board.on .ab-mark.maybe{opacity:.6;}
.ab-dot{display:block; width:5px; height:5px; border-radius:50%; background:var(--chalk-ink); margin-left:10px;}
.ab-dot-note{font-size:22px; opacity:0; transition:opacity .5s ease .5s;}
.ab-board.on .ab-dot-note{opacity:.8;}
.ab-key{margin-top:14px; font-size:21px; opacity:.6; text-align:right;}
.ab-after{margin-top:22px;}

.ab-believe{padding:clamp(56px,8vw,96px) 0 0; text-align:center;}
.ab-ring{animation:ab-ring 3.6s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:center;}
@keyframes ab-ring{from{transform:scale(.94);} to{transform:scale(1.04);}}
.ab-yarn{animation:ab-yarn 2.8s ease-in-out infinite alternate;}
@keyframes ab-yarn{from{transform:translate(150px,124px) rotate(-20deg);} to{transform:translate(142px,124px) rotate(25deg);}}

.ab-end{padding:clamp(56px,8vw,96px) 0 clamp(64px,9vw,110px); text-align:center;}
.ab-end p{font-size:16px; color:var(--ink2);}

/* ── Live map: pins dropping on the rooftops ────── */
.map-wall{height:auto; min-height:76px; padding-block:10px;}
.map-stats{flex-wrap:wrap; gap:6px 34px;}
.map-stats b{font-size:1.6em; font-weight:600; margin-right:6px; vertical-align:-2px;}
.map-roof{cursor:pointer;}
.map-pin{transform-box:fill-box; transform-origin:50% 100%; animation:how-drop .7s cubic-bezier(.3,1.6,.5,1) forwards;}
.map-pin.out{transition:opacity .8s ease; opacity:0;}
.map-ripple{transform-box:fill-box; transform-origin:center; animation:how-ripple 1.4s ease-out .5s both;}

/* ── Get involved: three spots on one street ─────────── */
.inv-spots{
  list-style:none; margin:clamp(14px, 3vh, 30px) 0 0; padding:0; position:relative; z-index:2;
  display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(4px, 2vw, 28px);
}
.inv-spot{display:block; transition:transform .35s cubic-bezier(.3,1.5,.5,1); -webkit-tap-highlight-color:transparent;}
.inv-spot svg{display:block; width:100%; height:auto; overflow:visible;}
.inv-spot:hover, .inv-spot:focus-visible{transform:translateY(-6px);}
.inv-spot:focus-visible{outline:2px solid var(--w-ink); outline-offset:4px; border-radius:12px;}
.inv-labels{pointer-events:auto;}
.inv-labels .how-label{text-decoration:none; opacity:1;}
.inv-labels .how-label:hover{transform:rotate(-2deg) scale(1.08);}
.inv-flash{opacity:0; pointer-events:none;}
.inv-flash.go{animation:how-flash .55s ease-out;}
.inv-heart{opacity:0;}
.inv-heart.go{animation:h-plus 1.6s ease-out;}
.inv-kibble{opacity:0;}
.inv-kibble.go{animation:inv-fall .7s cubic-bezier(.5,0,1,.6) both; animation-delay:var(--dl,0s);}
@keyframes inv-fall{0%{opacity:1; transform:translateY(-70px);} 90%{opacity:1;} 100%{opacity:1; transform:translateY(0);}}
.inv-awning{transform-box:fill-box; transform-origin:50% 0; animation:a-noren 3.2s ease-in-out infinite alternate;}
.inv-sign{transform-box:fill-box; transform-origin:50% 0; animation:a-swing 3.8s ease-in-out infinite alternate;}

/* ── Awareness days: a tear-off calendar on the wall ─── */
.days-layout{display:grid; grid-template-columns:minmax(0, 1fr) 300px; gap:28px; align-items:end;}
.days-layout .scene-copy{padding-bottom:40px;}
.days-art{position:relative; z-index:2; width:300px; height:300px; margin-bottom:-6px;}
.days-nail{position:absolute; inset:0; width:100%; height:100%; overflow:visible; pointer-events:none;}
.days-nail .cat{pointer-events:auto;}
.days-cal{
  position:absolute; left:28px; top:34px; width:150px; height:178px; padding:0; border:0; background:none;
  cursor:pointer; font:inherit; text-align:center; -webkit-tap-highlight-color:transparent;
  transform:rotate(-3deg); transform-origin:50% 0;
}
.days-cal:focus-visible{outline:2px solid var(--w-ink); outline-offset:4px; border-radius:8px;}
.days-page{
  position:absolute; inset:0; display:flex; flex-direction:column; overflow:hidden;
  background:#FFFDF8; border-radius:6px; box-shadow:0 8px 18px rgba(20,12,6,.28);
  color:#2B2622;
}
.days-page.under{box-shadow:0 2px 0 #E9E1D2, 0 4px 0 #DDD3C1, 0 10px 18px rgba(20,12,6,.24);}
.days-page.tear{animation:days-tear .9s cubic-bezier(.4,0,.8,.6) forwards; transform-origin:20% 0; z-index:2;}
@keyframes days-tear{
  0%{transform:rotate(0); opacity:1;}
  30%{transform:rotate(-14deg) translateY(6px);}
  100%{transform:rotate(-38deg) translate(-60px, 260px); opacity:0;}
}
.days-month{background:#C9533A; color:#FFF4E4; font-weight:800; font-size:13px; letter-spacing:2px; padding:9px 0 7px; text-transform:uppercase;}
.days-num{font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:58px; line-height:1; margin-top:8px;}
.days-num.word{font-size:30px; margin-top:16px; margin-bottom:10px;}
.days-name{font-family:'Caveat',cursive; font-weight:600; font-size:19px; line-height:1.05; padding:4px 10px 0; flex:1; display:flex; align-items:center; justify-content:center;}
.days-when{font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#A87B2E; padding:0 0 10px;}

/* ── Contact: a cat on the post box ──────────────────── */
.contact-layout{display:grid; grid-template-columns:minmax(0, 1fr) 250px; gap:28px; align-items:end;}
.contact-layout .scene-copy{padding-bottom:36px;}
.contact-art{display:block; position:relative; z-index:2; width:250px; height:auto; overflow:visible; margin-top:clamp(48px, 9vh, 90px);}
.scene .social-icon{background:rgba(255,255,255,.55); color:#2B2622;}
.scene-handle{margin-top:16px; font-size:13.5px; font-weight:600; color:var(--w-ink2); text-shadow:0 0 14px var(--w-glow);}
.post-box{cursor:pointer;}
.post-letter{opacity:0;}
.post-letter.go{animation:post-letter 1.2s cubic-bezier(.5,0,.6,1) both;}
@keyframes post-letter{
  0%{opacity:0; transform:translate(-150px, -120px) rotate(-30deg);}
  15%{opacity:1;}
  70%{opacity:1; transform:translate(0, 0) rotate(0);}
  100%{opacity:0; transform:translate(0, 14px) rotate(0);}
}
.post-flap{transform-box:fill-box; transform-origin:50% 0;}
.post-flap.go{animation:post-flap 1.2s ease both;}
@keyframes post-flap{0%,55%{transform:scaleY(1);} 65%{transform:scaleY(-.2);} 85%,100%{transform:scaleY(1);}}

/* ── Join: a spot saved for you ──────────────────────── */
.join-copy{text-align:center;}
.join-copy > *{margin-inline:auto;}
.join-copy .store-row{justify-content:center;}
.join-note{margin-top:20px; font-size:14.5px; font-weight:600; color:var(--w-ink2); text-shadow:0 0 14px var(--w-glow);}
.join-art{max-width:700px; margin-inline:auto;}
.join-spot{cursor:pointer;}
.join-outline{stroke:var(--chalk); stroke-width:3; stroke-dasharray:7 8; fill:none; stroke-linecap:round; transition:opacity .4s ease;}
.join-you{font-family:'Caveat',cursive; font-weight:600; font-size:30px; fill:var(--chalk); transition:opacity .4s ease;}
.join-spot.filled .join-outline, .join-spot.filled .join-you{opacity:0;}
.join-new .cat{animation:join-in .7s cubic-bezier(.3,1.6,.5,1) both;}
@keyframes join-in{0%{transform:translateY(-120px) scale(.9); opacity:0;} 100%{transform:translateY(0) scale(1); opacity:1;}}
.join-heart{opacity:0;}
.join-heart.go{animation:h-plus 1.6s ease-out; animation-delay:var(--dl,0s);}

/* ── Awareness day articles (e.g. black-cat-day.html): the day's page on a lamp post, then the story ── */
.scene .eyebrow a{color:inherit; text-decoration:none; border-bottom:1px solid currentColor;}
.art{padding:clamp(40px,6vw,72px) 0 clamp(64px,9vw,110px);}
.wrap.art-wrap{max-width:728px;}
.art-meta{font-size:13.5px; font-weight:600; color:var(--ink3);}
.art p, .art li{font-size:17.5px; line-height:1.7; color:var(--ink);}
.art p{margin:18px 0 0;}
.art h2{margin-top:44px; font-size:clamp(23px,2.6vw,28px); line-height:1.2;}
.art ul{margin:16px 0 0; padding-left:22px;}
.art li{margin-top:10px;}
.art li::marker{color:var(--ochre);}
.art a{color:var(--ink); text-decoration-color:var(--ochre); text-decoration-thickness:2px; text-underline-offset:3px;}
.art-end{margin-top:40px !important; font-family:'Caveat',cursive; font-weight:600; font-size:26px !important; line-height:1.2 !important; transform:rotate(-1deg);}
.art-cta{margin-top:20px !important;}
.art-cta .sign-btn{text-decoration:none;}
.art-photo{--tilt:-1.2deg; margin:40px auto 8px; max-width:560px;}
.art-photo img{display:block; width:100%; height:auto; border-radius:1px;}
.art-photo-tall{max-width:380px;}
.art-pair{margin:36px auto 6px; max-width:560px;}
.art-pair .tprint img{display:block; width:100%; height:auto; border-radius:1px;}
.art-pair-note{text-align:center; font-size:15px; color:var(--ink2); margin-top:4px;}
.art-sources{margin-top:56px; padding-top:22px; border-top:1px solid var(--rule);}
.art-sources h2{margin-top:0; font-size:15px; font-family:inherit; font-weight:700; color:var(--ink3);}
.art-sources ol{margin:10px 0 0; padding-left:20px;}
.art-sources li{font-size:13.5px; line-height:1.5; color:var(--ink3);}
.art-sources a{color:var(--ink3); text-decoration-color:var(--ink4); text-decoration-thickness:1px;}
/* Guides: the hub (guides.html), the More box under each article, and guide extras */
.grow-label{fill:var(--chalk);}
path.grow-label{fill:none; stroke:var(--chalk);}
.gd-list{padding:clamp(48px,7vw,80px) 0 0; text-align:center;}
.gd-list + .gd-list{padding-bottom:clamp(64px,9vw,110px);}
.gd-more{padding:clamp(48px,7vw,80px) 0 clamp(64px,9vw,110px); border-top:1px solid var(--rule); text-align:center;}
.gd-grid{list-style:none; margin:36px auto 0; padding:0; max-width:1000px; display:flex; flex-wrap:wrap; justify-content:center; gap:clamp(24px,3.5vw,44px); text-align:left;}
.gd-grid > li{flex:0 1 290px; min-width:0;}
.gd-card{display:flex; flex-direction:column; height:100%; padding-bottom:16px; text-decoration:none; color:#2B2622;}
.gd-card img{display:block; flex:none; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; border-radius:1px; background:#EFE7DA;}
.gd-tag{margin:12px 4px 0; font-size:11px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:#A87B2E;}
.gd-title{margin:4px 4px 0; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:19px; line-height:1.2;}
.gd-sum{margin:6px 4px 0; font-size:14px; line-height:1.45; color:#5A5048;}
.gd-more .short-line, .gd-list .short-line{margin-top:28px;}
.gd-list .gd-list-lede{margin-top:12px;}
.art-quick{margin:32px 0 8px; padding:22px 22px 18px; background:var(--paper2); border-radius:6px; border:1px solid var(--rule);}
.art-quick h2{margin:0; font-size:21px;}
.art-table{width:100%; margin-top:14px; border-collapse:collapse; font-size:15.5px; line-height:1.45;}
.art-table th, .art-table td{padding:9px 10px 9px 0; border-top:1px solid var(--rule); text-align:left; vertical-align:top; color:var(--ink);}
.art-table thead th{border-top:0; font-size:12px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:var(--ink3);}
.art-table tbody th{width:32%; font-weight:700; white-space:nowrap;}
.art .art-quick-note{margin-top:10px; font-size:14px; color:var(--ink2);}
.kit-grid{list-style:none; margin:16px 0 0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px;}
.kit-grid-3{grid-template-columns:repeat(3,minmax(0,1fr));}
.kit-card{padding:10px 14px 14px; background:#FFFDF8; border-radius:4px; box-shadow:0 2px 0 rgba(0,0,0,.04), 0 6px 14px rgba(20,12,6,.08);}
.kit-art{display:block; width:100%; height:auto; aspect-ratio:200/140; color:#A87B2E; overflow:visible;}
.kit-note{font-family:'Caveat',cursive; font-weight:600; font-size:15px; fill:#8A5A1E;}
.kit-arrow{fill:none; stroke-dasharray:2 3;}
.art .kit-card h3{margin:6px 0 0; font-family:'Fraunces',Georgia,serif; font-size:17px; color:#2B2622;}
.art .kit-card p{margin:4px 0 0; font-size:14.5px; line-height:1.45; color:#5A5048;}
.art .kit-card .kit-do{margin:8px 0 0; padding:8px 0 0 18px; border-top:1px dashed rgba(43,38,34,.15); font-size:14px; line-height:1.4; color:#2B2622;}
.art .kit-card .kit-do li{margin:3px 0 0; font-size:14px; line-height:1.4; color:#2B2622;}
.art .kit-card .kit-do li::marker{color:#A87B2E;}
.art .art-note{margin-top:36px; padding:14px 16px; border-left:3px solid var(--ochre); background:var(--ochre-tint); font-size:15px; color:var(--ink);}
.day-row > a{display:flex; flex-direction:column; align-items:center; flex:1; color:inherit; text-decoration:none;}
.day-read{display:block; margin-top:10px; font-family:'Caveat',cursive; font-weight:600; font-size:19px; line-height:1; color:#C8433E;}

@media (max-width:1000px){
  .days-grid{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:820px){
  .dl-scene{min-height:0;}
  .dl-art{position:relative; right:auto; bottom:auto; width:min(520px, 100%); margin:22px auto -2px; display:block;}
  .dl-spacer{display:none;}
  .days-layout, .contact-layout{grid-template-columns:1fr; gap:0;}
  .days-art, .contact-art{margin-inline:auto;}
  .contact-layout .scene-copy, .days-layout .scene-copy{padding-bottom:0;}
  .contact-art{width:220px;}
}
@media (max-width:720px){
  .days-grid{grid-template-columns:1fr 1fr; gap:28px 14px;}
  .gd-grid > li{flex-basis:340px;}
  .kit-grid{grid-template-columns:1fr;}
  .art-table tbody th{white-space:normal;}
  .day-row{padding:28px 10px 14px;}
  .day-date{font-size:26px;}
  .day-name{font-size:14px;}

  .gi-board{grid-template-columns:1fr; max-width:400px; gap:40px;}


  .ab-row{grid-template-columns:1fr; gap:8px;}
  .tprints{grid-template-columns:1fr; max-width:300px; gap:44px;}
  .art-pair{grid-template-columns:repeat(2,minmax(0,1fr)); max-width:none; gap:16px;}
  .art-pair .tprint{padding:6px 6px 0;}
  .art-pair .tprint::before{width:44px; height:16px; margin-left:-22px; top:-8px;}
  .art-pair figcaption{font-size:18px; padding:7px 2px 9px;}
  .ab-key{text-align:left;}

  .scene .world-sun{left:90% !important; bottom:calc(100% - 52px) !important; --sun-size:52px;}
  .scene-skyline{height:130px;}
  .scene-wall{height:48px;}
  .scene-wall.map-wall{height:auto;}
  .map-art{width:150%; margin-left:-25%;}
  .inv-spots{margin-top:6px;}
  .inv-labels .how-label{font-size:19px;}
  .ab-tally svg{height:24px;}
  .scene-chalk{gap:12px;}
}
@media (prefers-reduced-motion: reduce){
  .scene *, .scene *::before, .scene *::after{animation:none !important; transition:none !important;}
  .ab-board *, .tprints *, .tprint, .sign-btn, .mp-add-art *, .day-row{animation:none !important; transition:none !important;}
}
.how-labelwrap{position:relative; height:100%;}