/* ── World hero (index.html) ─────────────────────────
   The sky palettes and cat classes are shared with the page scenes (scene.css).
   A rooftop scene of cats from cities around the world. world.js
   draws the layers and sets data-sky from the visitor's local time
   (or ?sky=dawn|day|golden|night). Scene colours live here per sky;
   colours inside the drawing are tinted by world.js. */

.world{
  --scene-h:clamp(340px, 54vh, 580px);
  position:relative; isolation:isolate; overflow:hidden;
  min-height:calc(100svh - 66px);
  display:flex; flex-direction:column;
  padding:0; color:var(--w-ink);
  background:var(--sky-low);
}

/* Sky palettes */
.world[data-sky="day"], .scene[data-sky="day"]{
  --sky-top:#5FA8E6; --sky-mid:#A9D3F2; --sky-low:#E7F3FA;
  --sun-core:#FFFBEA; --sun-glow:rgba(255,246,214,.75); --sun-size:96px;
  --cloud:#FFFFFF; --cloud-op:.92; --bird:#3E4E63;
  --w-ink:#1C2A3B; --w-ink2:#33475E; --w-glow:rgba(231,243,250,.9);
  --w-glass:rgba(255,255,255,.62); --w-glass-line:rgba(28,42,59,.10);
}
.world[data-sky="dawn"], .scene[data-sky="dawn"]{
  --sky-top:#7E95CC; --sky-mid:#E6B3BF; --sky-low:#FCDDB8;
  --sun-core:#FFF1DC; --sun-glow:rgba(255,200,170,.8); --sun-size:110px;
  --cloud:#FFE4EC; --cloud-op:.8; --bird:#4A3F5C;
  --w-ink:#272238; --w-ink2:#463D5A; --w-glow:rgba(252,221,200,.85);
  --w-glass:rgba(255,245,245,.55); --w-glass-line:rgba(39,34,56,.12);
}
.world[data-sky="golden"], .scene[data-sky="golden"]{
  --sky-top:#86AED6; --sky-mid:#F5D3A1; --sky-low:#F4A261;
  --sun-core:#FFF4D6; --sun-glow:rgba(255,190,95,.85); --sun-size:132px;
  --cloud:#FFE3C6; --cloud-op:.85; --bird:#4B3428;
  --w-ink:#2C1E15; --w-ink2:#4A3426; --w-glow:rgba(245,211,161,.85);
  --w-glass:rgba(255,246,232,.58); --w-glass-line:rgba(44,30,21,.12);
}
.world[data-sky="night"], .scene[data-sky="night"]{
  --sky-top:#0B1530; --sky-mid:#1B2A55; --sky-low:#46407A;
  --sun-core:#F6F2E4; --sun-glow:rgba(200,214,255,.35); --sun-size:70px;
  --cloud:#3A4775; --cloud-op:.55; --bird:transparent;
  --w-ink:#F6EEDF; --w-ink2:#D3CBE6; --w-glow:rgba(11,21,48,.7);
  --w-glass:rgba(30,40,80,.55); --w-glass-line:rgba(246,238,223,.16);
}

/* Sky */
.world-sky{
  position:absolute; inset:0; z-index:-4;
  background:linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 58%, var(--sky-low) 100%);
}
.world-sun{
  position:absolute; width:var(--sun-size); height:var(--sun-size); border-radius:50%;
  background:radial-gradient(circle, var(--sun-core) 0 55%, rgba(255,255,255,0) 72%);
  box-shadow:0 0 80px 40px var(--sun-glow), 0 0 220px 120px var(--sun-glow);
  transform:translate(-50%, 50%);
}
.world[data-sky="golden"] .world-sun{left:74%; bottom:calc(var(--scene-h) * .5);}
.world[data-sky="day"]    .world-sun{left:78%; bottom:calc(100% - 120px);}
.world[data-sky="dawn"]   .world-sun{left:22%; bottom:calc(var(--scene-h) * .55);}
.world[data-sky="night"]  .world-sun{left:80%; bottom:calc(100% - 130px);
  background:radial-gradient(circle at 38% 36%, #FFFDF4 0 30%, var(--sun-core) 52%, #DCD6C4 66%, rgba(255,255,255,0) 71%);}

.world-stars{position:absolute; inset:0 0 30% 0; opacity:0;}
.world[data-sky="night"] .world-stars{opacity:1;}
.world[data-sky="dawn"] .world-stars{opacity:.25;}
.world-star{position:absolute; width:2px; height:2px; border-radius:50%; background:#fff; opacity:.8;}
.world-star.tw{animation:w-twinkle var(--d,4s) ease-in-out infinite; animation-delay:var(--dl,0s);}
@keyframes w-twinkle{0%,100%{opacity:.9;} 50%{opacity:.2;}}

.world-cloud{
  position:absolute; left:var(--x); top:var(--y); width:var(--w); opacity:var(--cloud-op);
  animation:w-drift var(--d) linear infinite; animation-delay:var(--dl);
}
.world-cloud svg{display:block; width:100%; height:auto; fill:var(--cloud);}
@keyframes w-drift{from{transform:translateX(calc(-30vw - var(--x)));} to{transform:translateX(calc(110vw - var(--x)));}}

.world-bird{
  position:absolute; left:0; top:var(--y); width:var(--w,26px);
  animation:w-fly var(--d) linear infinite; animation-delay:var(--dl);
}
.world-bird-bob{animation:w-bob 3.2s ease-in-out infinite alternate;}
.world-bird svg{display:block; width:100%; height:auto; overflow:visible;}
.world-bird path{fill:none; stroke:var(--bird); stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;}
.world-bird-wings{transform-box:fill-box; transform-origin:50% 60%; animation:w-flap .42s ease-in-out infinite alternate;}
@keyframes w-fly{from{transform:translateX(-8vw);} to{transform:translateX(108vw);}}
@keyframes w-bob{from{transform:translateY(-10px);} to{transform:translateY(12px);}}
@keyframes w-flap{from{transform:scaleY(1);} to{transform:scaleY(-.35);}}

/* Layers */
.world-layer{
  position:absolute; left:0; bottom:0; width:100%; display:block;
  will-change:transform; overflow:visible;
}
.world-far{height:var(--scene-h); z-index:-3;}
.world-mid{height:calc(var(--scene-h) * .82); z-index:-2;}
.world-near{height:calc(var(--scene-h) * .62); z-index:1;}

/* Copy */
.world-copy{position:relative; z-index:3; width:100%; padding-top:clamp(24px, 6vh, 84px);}
.world-copy > *{max-width:600px;}
.world .world-eyebrow{color:var(--w-ink2); text-shadow:0 0 16px var(--w-glow);}
.world h1{
  color:var(--w-ink); margin-top:8px;
  font-size:clamp(36px, min(5.4vw, 7.4vh), 64px); line-height:1.04; letter-spacing:-0.8px;
  text-shadow:0 0 30px var(--w-glow);
}
.world-lede{
  color:var(--w-ink2); font-size:18.5px; line-height:1.55; margin-top:16px; max-width:530px;
  text-shadow:0 0 20px var(--w-glow), 0 0 4px var(--w-glow);
}
.world .hero-ctas{margin-top:26px;}
.world-btn-glass{
  background:var(--w-glass); color:var(--w-ink); box-shadow:inset 0 0 0 1px var(--w-glass-line);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.world-btn-glass:hover{transform:translateY(-1px);}
.world-hint{
  display:flex; align-items:center; gap:8px; margin-top:18px;
  font-size:14px; font-weight:600; color:var(--w-ink2); text-shadow:0 0 14px var(--w-glow);
}
.world-hint-paw{flex-shrink:0; animation:w-nudge 2.4s ease-in-out infinite;}
@keyframes w-nudge{0%,70%,100%{transform:rotate(0);} 78%{transform:rotate(-18deg);} 86%{transform:rotate(12deg);}}
.world-spacer{flex:1 0 calc(var(--scene-h) * .6);}


/* Drawing details */
.w-glint{animation:w-glint 3.4s ease-in-out infinite; animation-delay:var(--dl,0s);}
@keyframes w-glint{0%,100%{opacity:.15;} 50%{opacity:.85;}}
.w-glow{animation:w-glowpulse 3s ease-in-out infinite alternate; animation-delay:var(--dl,0s);}
@keyframes w-glowpulse{from{opacity:var(--lights);} to{opacity:calc(var(--lights) * .65);}}
.world{--lights:0;}
.world[data-sky="golden"]{--lights:.55;}
.world[data-sky="dawn"]{--lights:.15;}
.world[data-sky="night"]{--lights:1;}
.w-laundry{transform-box:fill-box; transform-origin:50% 0; animation:w-flutter 2.6s ease-in-out infinite alternate; animation-delay:var(--dl,0s);}
@keyframes w-flutter{from{transform:rotate(-5deg) skewX(-3deg);} to{transform:rotate(6deg) skewX(4deg);}}

/* Cats */
.cat{cursor:pointer; outline:none; -webkit-tap-highlight-color:transparent;}
.cat-ring{fill:none; stroke:var(--w-ink); stroke-width:2.5; opacity:0;}
.cat:focus-visible .cat-ring{opacity:.7;}
.cat-tail{animation:w-tail var(--td,3.6s) ease-in-out infinite alternate; animation-delay:var(--tdl,0s);}
@keyframes w-tail{from{transform:rotate(-8deg);} to{transform:rotate(10deg);}}
.cat-tail.loaf{animation-name:w-tail-loaf;}
@keyframes w-tail-loaf{from{transform:rotate(-3deg);} to{transform:rotate(4deg);}}
.cat-eye{animation:w-blink var(--bd,5s) infinite; animation-delay:var(--bdl,0s);}
@keyframes w-blink{0%,93%,100%{transform:scaleY(1);} 96%{transform:scaleY(.08);}}
.cat-lids{opacity:0;}
.cat.asleep .cat-eye{opacity:0;}
.cat.asleep .cat-lids{opacity:1;}
.cat-zzz{opacity:0;}
.cat.asleep .cat-zzz{opacity:1;}
.cat-zzz text{font-family:'Fraunces',Georgia,serif; font-weight:600; fill:var(--w-ink); animation:w-z 3.6s ease-out infinite; opacity:0;}
@keyframes w-z{0%{opacity:0; transform:translate(0,0);} 20%{opacity:.8;} 100%{opacity:0; transform:translate(14px,-30px);}}
.ear-twitch{animation:w-ear var(--ed,7s) infinite; animation-delay:var(--edl,0s);}
@keyframes w-ear{0%,90%,100%{transform:rotate(0);} 93%{transform:rotate(-16deg);} 96%{transform:rotate(5deg);}}
.eye-glow{opacity:0;}
.world[data-sky="night"] .eye-glow, .scene[data-sky="night"] .eye-glow{opacity:.85;}
.world[data-sky="golden"] .eye-glow, .scene[data-sky="golden"] .eye-glow{opacity:.15;}
.cat.hop .cat-bob{animation:w-hop .62s cubic-bezier(.3,1.5,.5,1);}
@keyframes w-hop{
  0%{transform:translateY(0) scale(1,1);}
  18%{transform:translateY(0) scale(1.07,.88);}
  50%{transform:translateY(-18px) scale(.95,1.07);}
  80%{transform:translateY(0) scale(1.05,.94);}
  100%{transform:translateY(0) scale(1,1);}
}

.walker{animation:w-walk var(--wd,26s) linear infinite;}
@keyframes w-walk{
  0%{transform:translateX(0) scaleX(1);}
  44%{transform:translateX(var(--wx)) scaleX(1);}
  50%{transform:translateX(var(--wx)) scaleX(-1);}
  94%{transform:translateX(0) scaleX(-1);}
  100%{transform:translateX(0) scaleX(1);}
}
.walker-leg{animation:w-leg .5s ease-in-out infinite alternate;}
.walker-leg.b{animation-delay:-.5s;}
@keyframes w-leg{from{transform:rotate(-24deg);} to{transform:rotate(24deg);}}
.cat.paused .walker, .cat.paused .walker-leg{animation-play-state:paused;}

/* Name tag that pops over a cat */
.cat-tag{
  position:absolute; z-index:6; left:0; top:0; pointer-events:none;
  padding:8px 14px 9px; border-radius:6px; text-align:center; white-space:nowrap;
  background:#FFFDF8; color:#2B2622; box-shadow:0 12px 26px rgba(20,12,6,.28);
  opacity:0; transform:translate(-50%, -100%) translateY(10px) rotate(var(--rot,-3deg)) scale(.6);
  transition:opacity .25s ease, transform .45s cubic-bezier(.2,1.5,.4,1);
}
.cat-tag.show{opacity:1; transform:translate(-50%, -100%) rotate(var(--rot,-3deg)) scale(1);}
.cat-tag::after{
  content:""; position:absolute; left:50%; bottom:-6px; width:12px; height:12px;
  background:#FFFDF8; transform:translateX(-50%) rotate(45deg); border-radius:2px;
}
.cat-tag-name{display:block; font-family:'Fraunces',Georgia,serif; font-weight:600; font-size:18px; line-height:1.1;}
.cat-tag-city{display:block; font-size:11px; font-weight:700; letter-spacing:1.1px; text-transform:uppercase; color:#9A7B5C; margin-top:3px;}
.cat-paw{
  position:absolute; z-index:5; left:0; top:0; width:14px; height:14px; pointer-events:none; color:#FFFDF8;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.25));
  animation:w-paw 1.3s ease-out forwards;
}
@keyframes w-paw{
  from{opacity:1; transform:translate(-50%,-50%) scale(.6);}
  to{opacity:0; transform:translate(calc(-50% + var(--px)), calc(-50% - 70px)) scale(1.1) rotate(var(--pr));}
}

@media (max-width:720px){
  .world{--scene-h:clamp(320px, 50svh, 440px);}
  .world h1{font-size:clamp(32px, 9vw, 40px);}
  .world-lede{font-size:16.5px;}
  .world-copy{padding-top:26px;}
  .world[data-sky="day"] .world-sun, .world[data-sky="night"] .world-sun{left:92%; bottom:calc(100% - 46px); --sun-size:64px;}
  }

@media (prefers-reduced-motion: reduce){
  .world *, .world *::before, .world *::after{animation:none !important;}
  .world-bird{display:none;}
  .cat-tag{transition:opacity .2s ease;}
}


/* ── Alley (index.html): how it works, then real catches on a line ── */
.alley{
  position:relative; isolation:isolate; overflow:hidden; padding:72px 0 0;
  color:var(--a-ink);
  background-color:var(--wall);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .35 0 0 0 0 .25 0 0 0 0 .15 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 30% 18% at 12% 30%, var(--wall2), transparent 70%),
    radial-gradient(ellipse 24% 14% at 86% 62%, var(--wall2), transparent 70%),
    radial-gradient(ellipse 20% 10% at 40% 88%, var(--wall2), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.16), rgba(0,0,0,0) 90px);
}
.alley[data-sky="day"]{
  --wall:#F1E6D6; --wall2:#E4D3BC; --a-ink:#26303D; --a-ink2:#4C5A6C;
  --cobble:#B9B1A6; --cobble2:#A39B90; --cobble-gap:#8A8278; --beam:rgba(255,255,255,.4); --lamp:0;
}
.alley[data-sky="dawn"]{
  --wall:#EBD6D4; --wall2:#DCC2C2; --a-ink:#2E2638; --a-ink2:#54485F;
  --cobble:#ADA0AE; --cobble2:#998C9A; --cobble-gap:#7E7282; --beam:rgba(255,205,215,.4); --lamp:.25;
}
.alley[data-sky="golden"]{
  --wall:#EED3B0; --wall2:#E0BF96; --a-ink:#3A2618; --a-ink2:#5E4330;
  --cobble:#B79A80; --cobble2:#A3866C; --cobble-gap:#86684F; --beam:rgba(255,210,140,.5); --lamp:.35;
}
.alley[data-sky="night"]{
  --wall:#2F3557; --wall2:#272D4C; --a-ink:#F2EBDD; --a-ink2:#C9C3DB;
  --cobble:#3A4066; --cobble2:#323858; --cobble-gap:#22273F; --beam:rgba(255,200,110,0); --lamp:1;
}
.alley-light{
  position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(112deg, transparent 18%, var(--beam) 34%, transparent 48%, transparent 58%, var(--beam) 70%, transparent 84%);
  mix-blend-mode:soft-light;
}
.alley[data-sky="dawn"] .alley-light{background:linear-gradient(68deg, transparent 18%, var(--beam) 34%, transparent 50%);}
.alley-lamp{position:absolute; z-index:-1; width:16px; height:26px; border-radius:4px 4px 8px 8px; background:#3B2E26; opacity:.9;}
.alley-lamp::before{content:""; position:absolute; left:50%; top:22px; width:380px; height:380px; transform:translateX(-50%); border-radius:50%;
  background:radial-gradient(circle at 50% 10%, rgba(255,205,120,.55), rgba(255,205,120,0) 62%); opacity:var(--lamp); pointer-events:none;}
.alley-lamp::after{content:""; position:absolute; left:3px; right:3px; bottom:-6px; height:10px; border-radius:0 0 50% 50%; background:#FFD27A; opacity:max(var(--lamp), .35); box-shadow:0 0 18px 6px rgba(255,205,120,calc(var(--lamp) * .8));}
.alley-lamp-a{left:calc((100% - 1120px) / 4); top:150px;}
.alley-lamp-b{right:calc((100% - 1120px) / 4); top:520px;}
@media (max-width:1279px){ .alley-lamp{display:none;} }

.alley-head{display:flex; align-items:flex-end; justify-content:space-between; gap:24px;}
.alley .alley-eyebrow{color:var(--a-ink2);}
.alley h2{color:var(--a-ink); font-size:clamp(28px,3.8vw,42px); max-width:560px; margin-top:6px; line-height:1.1;}

/* The cat in the window (the app's own black cat) */
.peek{flex-shrink:0; margin-right:12%;}
.peek-window{position:relative; width:118px; height:96px; background:linear-gradient(180deg,#1E2430,#2C3442); border:7px solid #F4EEE4; border-bottom:0; border-radius:52px 52px 0 0; overflow:hidden;}
.peek-cat{position:absolute; left:50%; bottom:-2px; width:96px; transform:translate(-50%, 100%); transition:transform .7s cubic-bezier(.2,1.4,.4,1); cursor:pointer; outline:none;}
.peek.up .peek-cat{transform:translate(-50%, 18%);}
.peek.ducked .peek-cat{transform:translate(-50%, 100%); transition-duration:.25s;}
.peek-eye{transform-box:fill-box; transform-origin:50% 50%; animation:w-blink 4.6s infinite;}
.peek-sill{position:absolute; left:-12px; right:-12px; bottom:0; height:10px; background:#F4EEE4; box-shadow:0 4px 6px rgba(0,0,0,.18);}
@keyframes a-swing{from{transform:rotate(-5deg);} to{transform:rotate(5deg);}}

/* The drawn alley (alley.js): How it works page and the homepage. Four 300 × 330 pieces that join into one street. */
.al-row{list-style:none; margin:40px auto 0; padding:0; max-width:1160px; display:grid; grid-template-columns:repeat(4,1fr); text-align:center;}
.al-row li{min-width:0;}
.al-row svg{display:block; width:calc(100% + 1px); height:auto;}
.al-row li:first-child svg{border-radius:14px 0 0 14px;}
.al-row li:last-child svg{border-radius:0 14px 14px 0;}
.al-row p{margin:16px auto 0; max-width:230px; padding:0 8px; font-size:15px; color:var(--ink2);}
.al-home{margin-top:56px;}
/* Six pieces on the homepage: two streets of three */
@media (min-width:721px){
  .al-six{grid-template-columns:repeat(3,1fr); max-width:980px; row-gap:36px;}
  .al-six li:nth-child(n) svg{border-radius:0;}
  .al-six li:nth-child(3n+1) svg{border-radius:14px 0 0 14px;}
  .al-six li:nth-child(3n) svg{border-radius:0 14px 14px 0;}
  .al-six li:nth-child(3n+1) .al-pipe{display:none;}
}
.al-home p{color:var(--a-ink2);}
.al-label{font-family:'Caveat',cursive; font-weight:600; font-size:30px; fill:#2B2622;}
.al-place{font-family:'Fraunces',Georgia,serif; font-weight:700; font-size:24px; fill:rgba(255,255,255,.85);}
.al-name{font-family:'Caveat',cursive; font-weight:600; font-size:20px; fill:#2B2622;}
.al-name-lg{font-size:28px;}
.al-town{font-size:8px; font-weight:700; fill:#8291A3;}
.al-heart{animation:al-heart 2.7s ease-in infinite; animation-delay:var(--hd); opacity:0; transform-box:fill-box; transform-origin:center;}
@keyframes al-heart{0%{opacity:0; transform:translateY(10px) scale(.5);} 25%{opacity:1; transform:translateY(0) scale(1);} 100%{opacity:0; transform:translateY(-34px) scale(.8);}}
.al-crown{animation:al-crown 3s ease-in-out infinite;}
@keyframes al-crown{0%,100%{transform:translateY(0) rotate(-6deg);} 50%{transform:translateY(-4px) rotate(6deg);}}
.al-send{animation:al-send 2.2s ease-in-out infinite;}
@keyframes al-send{0%,100%{transform:translateY(0) scale(1);} 50%{transform:translateY(-6px) scale(1.1);}}
.al-flash{opacity:0; animation:al-flash 3.6s ease-out infinite;}
@keyframes al-flash{0%,62%{opacity:0;} 66%{opacity:.85;} 80%,100%{opacity:0;}}
.al-pop{animation:al-pop 3.6s cubic-bezier(.3,1.6,.5,1) infinite;}
@keyframes al-pop{0%,66%{transform:scale(0);} 76%,94%{transform:scale(1);} 100%{transform:scale(0);}}
.al-write{animation:al-write 1.6s ease-in-out infinite alternate;}
@keyframes al-write{from{transform:translate(-6px,0);} to{transform:translate(4px,-2px);}}
@media (max-width:720px){
  .al-row{grid-template-columns:1fr 1fr; gap:28px 10px; margin-top:28px;}
  .al-row li svg{border-radius:12px; width:100%;}
  .al-row .al-pipe{display:none;}
  .al-row p{font-size:13.5px; margin-top:10px;}
}
@media (prefers-reduced-motion: reduce){
  .al-row *{animation:none !important; transition:none !important;}
  .al-pop{transform:scale(1);}
  .al-heart{opacity:1;}
}

/* Washing line of real catches */
.alley-line-block{margin-top:84px;}
.alley-line-head{display:flex; align-items:baseline; justify-content:space-between; gap:16px; flex-wrap:wrap;}
.alley-line-title{font-family:'Caveat',cursive; font-weight:600; font-size:clamp(28px,3.2vw,36px); color:var(--a-ink); transform:rotate(-1.5deg); transform-origin:left;}
.alley-line-link{font-weight:700; font-size:14.5px; color:var(--a-ink); text-decoration:none; border-bottom:2px solid currentColor; padding-bottom:1px;}
.alley-line{position:relative; height:330px; overflow:hidden; margin-top:6px;}
.alley-track{position:absolute; left:0; top:0; height:100%; will-change:transform;}
.alley-rope{position:absolute; left:0; top:0; height:100%; overflow:visible; pointer-events:none;}
.alley-rope path{fill:none; stroke:#5B4A3C; stroke-width:2.2;}
.line-print{
  position:absolute; top:0; width:156px; margin:0; padding:9px 9px 0; background:#FFFDF8; border-radius:2px;
  box-shadow:0 14px 24px rgba(20,12,6,.22); transform-origin:50% -4px;
  animation:a-sway var(--sd,4s) ease-in-out infinite alternate; animation-delay:var(--sdl,0s);
}
.line-print img{display:block; width:100%; height:auto; aspect-ratio:1; object-fit:cover; background:#E8E2D8;}
.line-print figcaption{font-family:'Caveat',cursive; font-weight:600; font-size:22px; line-height:1; color:#2B2622; text-align:center; padding:8px 4px 11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.peg{position:absolute; left:50%; top:-12px; width:10px; height:26px; margin-left:-5px; background:#C9A57A; border-radius:3px; box-shadow:inset -3px 0 0 #A9875E, 0 2px 3px rgba(0,0,0,.25); z-index:1;}
.peg::after{content:""; position:absolute; left:2px; right:2px; top:9px; height:3px; background:#7C7C7C; border-radius:1px;}
@keyframes a-sway{from{transform:rotate(calc(var(--tilt,0deg) - 2.5deg));} to{transform:rotate(calc(var(--tilt,0deg) + 2.5deg));}}

/* Cobbles and the cat who walks them */
.alley-ground{
  position:relative; height:96px; margin-top:20px;
  background:
    radial-gradient(ellipse 15px 8px at 50% 50%, var(--cobble) 92%, transparent 100%) 0 0/36px 20px,
    radial-gradient(ellipse 15px 8px at 50% 50%, var(--cobble2) 92%, transparent 100%) 18px 10px/36px 20px,
    var(--cobble-gap);
  box-shadow:inset 0 10px 14px -8px rgba(0,0,0,.35);
}
.alley-stroller{position:absolute; left:0; top:-56px; width:118px; height:72px; will-change:transform; cursor:pointer;}
.alley-stroller svg{display:block; width:100%; height:100%; overflow:visible;}
.alley[data-sky="night"] .alley-stroller svg{filter:brightness(.62) saturate(.8);}
.stroll-leg{transform-box:fill-box; transform-origin:50% 0;}
.alley-stroller.moving .stroll-leg{animation:w-leg .32s ease-in-out infinite alternate;}
.alley-stroller.moving .stroll-leg.b{animation-delay:-.32s;}
.stroll-tail{transform-box:fill-box; transform-origin:100% 100%; animation:w-tail 2.8s ease-in-out infinite alternate;}
.alley-stroller.flip svg{transform:scaleX(-1);}

@media (max-width:720px){
  .alley{padding-top:52px;}
  .peek{display:none;}
  .alley-line{height:280px;}
  .line-print{width:128px;}
}
@media (prefers-reduced-motion: reduce){
  .alley *, .alley *::before, .alley *::after{animation:none !important; transition:none !important;}
}

/* ── Harbour (index.html): a lighthouse counts the cats as you scroll ── */
.harbour{position:relative; height:260vh; padding:0; color:var(--h-ink);}
.harbour[data-sky="dusk"]{
  --h-top:#2A2A5A; --h-mid:#6B4479; --h-low:#D9746A; --h-hor:#F2A66A;
  --h-ink:#FFF4EA; --h-ink2:#F1D9DE; --h-glow:rgba(42,30,70,.55); --h-glass:rgba(40,28,66,.5);
}
.harbour[data-sky="night"]{
  --h-top:#0B1530; --h-mid:#17244A; --h-low:#27305E; --h-hor:#3A3A6E;
  --h-ink:#F6EEDF; --h-ink2:#D3CBE6; --h-glow:rgba(11,21,48,.7); --h-glass:rgba(20,28,60,.55);
}
.harbour-stick{position:sticky; top:66px; height:calc(100svh - 66px); min-height:560px; overflow:hidden; isolation:isolate; display:flex; flex-direction:column;}
.harbour-sky{position:absolute; inset:0; z-index:-2; background:linear-gradient(180deg, var(--h-top) 0%, var(--h-mid) 34%, var(--h-low) 56%, var(--h-hor) 68%, var(--h-hor) 100%);}
.harbour-moon{position:absolute; right:12%; top:9%; width:46px; height:46px; border-radius:50%; background:radial-gradient(circle at 38% 36%, #FFFDF4 0 40%, #E8E2D0 70%); box-shadow:0 0 50px 18px rgba(220,225,255,.25); opacity:0;}
.harbour[data-sky="night"] .harbour-moon{opacity:1;}
.harbour-stars{position:absolute; inset:0 0 50% 0;}
.harbour[data-sky="dusk"] .harbour-stars{opacity:.55;}
.harbour-scene{position:absolute; left:0; bottom:0; width:100%; height:62%; z-index:-1; overflow:visible;}

.harbour-copy{position:relative; z-index:2; width:100%; display:flex; justify-content:space-between; align-items:flex-start; gap:40px; padding-top:clamp(24px,6vh,64px);}
.harbour-main{max-width:560px;}
.harbour .harbour-eyebrow{color:var(--h-ink2);}
.harbour h2{color:var(--h-ink); font-size:clamp(30px,4.2vw,50px); line-height:1.06; margin-top:8px; text-shadow:0 0 28px var(--h-glow);}
.harbour-swap{display:grid; margin-top:16px;}
.harbour-swap > *{grid-area:1/1; transition:opacity .6s ease, transform .6s ease;}
.harbour-lede{font-size:17.5px; line-height:1.55; color:var(--h-ink2); text-shadow:0 0 18px var(--h-glow);}
.harbour-safe{display:flex; gap:12px; align-items:flex-start; padding:14px 16px; border-radius:14px; background:var(--h-glass); color:var(--h-ink); font-size:15.5px; line-height:1.5;
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
  opacity:0; transform:translateY(10px); pointer-events:none;}
.harbour-safe svg{flex-shrink:0; margin-top:2px; color:#F3D98F;}
.harbour-safe a{color:#F3D98F; font-weight:700; text-decoration:none; white-space:nowrap;}
.harbour.safe .harbour-lede{opacity:0; transform:translateY(-10px);}
.harbour.safe .harbour-safe{opacity:1; transform:none; pointer-events:auto;}

.harbour-count{flex-shrink:0; text-align:right; max-width:250px; padding-top:28px;}
.harbour-num{white-space:nowrap; font-family:'Fraunces',Georgia,serif; font-weight:700; line-height:1; color:var(--h-ink); text-shadow:0 0 30px var(--h-glow);}
.harbour-num b{font-size:clamp(56px,7vw,96px); font-variant-numeric:tabular-nums; display:inline-block;}
.harbour-num b.bump{animation:h-bump .35s ease;}
.harbour-num > span{font-size:clamp(22px,2.4vw,30px); opacity:.6; margin-left:4px;}
.harbour-count p{font-size:14.5px; color:var(--h-ink2); margin-top:6px; text-shadow:0 0 14px var(--h-glow);}
@keyframes h-bump{40%{transform:scale(1.14);}}

/* Scene bits */
.h-bob{animation:h-bob var(--bd,4.5s) ease-in-out infinite alternate; animation-delay:var(--bdl,0s);}
@keyframes h-bob{from{transform:translateY(-2.5px) rotate(-1.4deg);} to{transform:translateY(2.5px) rotate(1.4deg);}}
.h-shimmer{animation:w-glint 3.8s ease-in-out infinite; animation-delay:var(--dl,0s);}
.h-light{animation:w-glowpulse 3.2s ease-in-out infinite alternate; animation-delay:var(--dl,0s); --lights:1;}
.hcat-real{opacity:0; transition:opacity .8s ease;}
.hcat-sil{transition:opacity .8s ease;}
.hcat.counted .hcat-real{opacity:1;}
.hcat.counted .hcat-sil{opacity:0;}
.hcat-sil .sil-eye{animation:w-blink 4.8s infinite; transform-box:fill-box; transform-origin:50% 50%;}
.hcat-ping{fill:none; stroke:#FFE7A8; stroke-width:3; opacity:0; transform-box:fill-box; transform-origin:50% 50%;}
.hcat.counted .hcat-ping{animation:h-ping 1s ease-out;}
@keyframes h-ping{0%{opacity:.95; transform:scale(.3);} 100%{opacity:0; transform:scale(2.4);}}
.hcat-plus{font-family:'Fraunces',Georgia,serif; font-weight:700; fill:#FFE7A8; opacity:0;}
.hcat.counted .hcat-plus{animation:h-plus 1.2s ease-out;}
@keyframes h-plus{0%{opacity:0; transform:translateY(0);} 20%{opacity:1;} 100%{opacity:0; transform:translateY(-34px);}}
.harbour .eye-glow{opacity:.5;}
.harbour[data-sky="night"] .eye-glow{opacity:.85;}
.h-safe{opacity:0; transition:opacity .9s ease;}
.harbour.safe .h-safe{opacity:1;}
.h-safe circle{animation:h-breathe 3s ease-in-out infinite alternate; transform-box:fill-box; transform-origin:50% 50%;}
@keyframes h-breathe{from{transform:scale(.96);} to{transform:scale(1.04);}}

@media (max-width:720px){
  .harbour{height:240vh;}
  .harbour-copy{flex-direction:column; gap:10px; padding-top:22px;}
  .harbour h2{font-size:30px;}
  .harbour-lede{font-size:15.5px;}
  .harbour-safe{font-size:14px;}
  .harbour-count{text-align:left; padding-top:0; max-width:none; display:flex; align-items:baseline; gap:12px;}
  .harbour-num b{font-size:44px;}
  .harbour-count p{margin-top:0; font-size:13px;}
  .harbour-scene{height:48%;}
  .harbour-moon{right:5%; top:3%; width:30px; height:30px;}
  .harbour-num b{min-width:1.1ch;}
}
@media (prefers-reduced-motion: reduce){
  .harbour{height:auto;}
  .harbour-stick{position:relative; top:0; height:auto; min-height:0; padding-bottom:52vw;}
  .harbour *, .harbour *::before, .harbour *::after{animation:none !important; transition:none !important;}
}

/* ── Night sky (index.html): one gold star per mapped cat, the road ahead, then the ending ── */
.nightsky{
  --n-ink:#F6EEDF; --n-ink2:#C9C3DB; --n-gold:#F3D98F; --n-ground:#070B1C;
  position:relative; isolation:isolate; overflow:hidden; padding:0; color:var(--n-ink);
  background:linear-gradient(180deg, #0B1530 0%, #101C40 40%, #1A2150 72%, #222656 100%);
}
.night-canvas{position:absolute; inset:0; width:100%; height:100%; z-index:-1;}
.nightsky .night-eyebrow{color:var(--n-gold);}
.nightsky h2{color:var(--n-ink); font-size:clamp(28px,3.8vw,44px); line-height:1.1; margin-top:8px; text-shadow:0 0 30px rgba(11,21,48,.8);}
.night-lede{color:var(--n-ink2); font-size:17px; line-height:1.6; margin-top:14px; max-width:560px; text-shadow:0 0 16px rgba(11,21,48,.9);}
.night-lede b{font-family:'Fraunces',Georgia,serif; color:var(--n-gold); font-size:1.25em;}

.night-intro{display:flex; align-items:center; justify-content:space-between; gap:32px; padding-top:120px;}
.night-intro-copy{max-width:540px;}
.night-map-link{flex-shrink:0; display:block; width:min(340px, 40vw); border-radius:14px;}
.night-map{display:block; width:100%; height:auto; overflow:visible; transform:rotate(-2deg); transition:transform .4s ease;}
.night-map-link:hover .night-map{transform:rotate(0deg) scale(1.02);}
.nmap-card{fill:rgba(18,28,68,.72); stroke:rgba(200,215,255,.32); stroke-width:1.2;}
.nmap-grid{stroke:rgba(200,215,255,.08); stroke-width:1;}
.nmap-land{fill:rgba(200,215,255,.10); stroke:rgba(200,215,255,.5); stroke-width:1.3; stroke-linejoin:round;}
.nmap-town{transition:opacity .5s ease;}
.nmap-sq{fill:rgba(243,217,143,.16); stroke:rgba(243,217,143,.45); stroke-width:1;}
.nmap-glow{fill:url(#nmapGlow);}
.nmap-dot{fill:#FFF8E1;}
.nmap-name{font-family:'Fraunces',Georgia,serif; font-style:italic; font-size:14px; fill:rgba(220,228,255,.7); letter-spacing:.5px; opacity:0; transition:opacity 1s ease;}
.night-map.done .nmap-name{opacity:1;}

.night-road{padding-top:120px;}
.night-road > h2, .night-road > .night-lede{max-width:620px;}
.night-path{list-style:none; margin:46px 0 0; padding:0; display:grid; grid-template-columns:repeat(4,1fr); gap:28px; position:relative;}
.night-path::before{content:""; position:absolute; left:8px; right:8px; top:9px; border-top:2px dashed rgba(200,215,255,.28);}
.night-path li{position:relative; padding-top:34px;}
.night-node{position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:#1A2150; box-shadow:inset 0 0 0 2px rgba(200,215,255,.45);}
.night-path li.lit .night-node{background:var(--n-gold); box-shadow:0 0 0 6px rgba(243,217,143,.18), 0 0 24px 6px rgba(243,217,143,.55); animation:n-pulse 2.6s ease-in-out infinite;}
@keyframes n-pulse{50%{box-shadow:0 0 0 10px rgba(243,217,143,.08), 0 0 34px 10px rgba(243,217,143,.35);}}
.night-pill{display:inline-block; font-size:11px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; padding:3px 9px; border-radius:9999px; color:var(--n-ink2); box-shadow:inset 0 0 0 1px rgba(200,215,255,.3);}
.night-path li.lit .night-pill{color:#2A2010; background:var(--n-gold); box-shadow:none;}
.night-path h3{font-size:19px; color:var(--n-ink); margin-top:10px;}
.night-path p{font-size:14.5px; color:var(--n-ink2); margin-top:6px; max-width:240px;}
.night-path li:not(.lit) h3, .night-path li:not(.lit) p{opacity:.72;}
.night-link{display:inline-block; margin-top:28px; font-weight:700; font-size:14.5px; color:var(--n-gold); text-decoration:none; border-bottom:2px solid currentColor;}

.night-horizon{display:block; width:100%; height:clamp(170px, 20vw, 260px); margin-top:90px; overflow:visible;}
.night-cta{background:var(--n-ground); text-align:center; padding:10px 0 80px; margin-top:-2px;}
.night-cta h2{max-width:640px; margin-inline:auto;}
.night-cta .hero-ctas{justify-content:center; margin-top:26px;}
/* The ending is the waitlist form alone, its consent note quieter */
.night-cta .waitlist-form .example-note{opacity:.75;}
.nightsky .example-note{color:var(--n-ink2);}
.nightsky .example-note b{color:var(--n-ink); border-bottom-color:rgba(200,215,255,.4);}
.nightsky .example-note a{color:var(--n-gold);}
.nightsky .waitlist-form input{background:#141A36; color:var(--n-ink); border-color:rgba(200,215,255,.22);}
.nightsky .form-status{color:var(--n-ink2);}
.n-tail{transform-box:fill-box; transform-origin:0 100%; animation:n-tail 4s ease-in-out infinite alternate; animation-delay:var(--dl,0s);}
@keyframes n-tail{from{transform:rotate(-6deg);} to{transform:rotate(7deg);}}
.n-win{animation:w-glowpulse 4s ease-in-out infinite alternate; --lights:1; animation-delay:var(--dl,0s);}

@media (max-width:900px){
  .night-path{grid-template-columns:1fr 1fr; row-gap:34px;}
  .night-path::before{display:none;}
}
@media (max-width:720px){
  .night-intro{flex-direction:column; align-items:flex-start; padding-top:84px;}
  .night-map-link{width:min(300px, 84vw); align-self:center;}
  .night-road{padding-top:70px;}
  .night-path{grid-template-columns:1fr; gap:22px; padding-left:34px;}
  .night-path::before{display:block; left:9px; right:auto; top:8px; bottom:8px; border-top:0; border-left:2px dashed rgba(200,215,255,.28);}
  .night-path li{padding-top:0;}
  .night-node{left:-34px; top:2px;}
  .night-path h3{margin-top:6px;}
  .night-horizon{margin-top:60px;}
}
@media (prefers-reduced-motion: reduce){
  .nightsky *{animation:none !important; transition:none !important;}
}