@font-face{font-family:BRYK Paint;src:url('/assets/loitering-club/fonts/Captions.otf') format('opentype');font-display:swap;font-weight:400}
@font-face{font-family:BRYK Tag;src:url('/assets/loitering-club/fonts/MarkerFelt.otf') format('opentype');font-display:swap;font-weight:400}
.living-city{--city-paper:#f0eee3;--city-ink:#142536;--city-red:#a92e35;--city-accent:#c0ef51;--city-link:#314b0a;min-height:890px!important;height:auto!important;max-height:none!important;isolation:isolate}
.living-city:not(.is-complete){position:fixed;inset:0;z-index:10000;width:100%;height:100vh!important;min-height:100vh!important;max-height:100vh!important;height:100dvh!important;min-height:100dvh!important;max-height:100dvh!important}
body.intro-running{overflow:hidden}
body:has(.living-city:not(.is-complete)){overflow:hidden}
.living-city:not(.is-complete) .hero-interface{position:absolute!important;visibility:hidden!important}
.living-city .hero-film{object-fit:cover;object-position:center}
.living-city:not(.is-complete) .hero-tools{z-index:30}
.living-city .wall-logo-lockup{max-height:65%;width:min(470px,60vw,50svh)}
.living-city .city-scene{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;opacity:0;transition:opacity 1s}
.living-city.is-complete .city-scene{opacity:1}
.city-scene>img,.city-atmosphere{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:center;pointer-events:none}
.city-scene::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#040b12eb,#040b128c 38%,#040b120a 75%),linear-gradient(180deg,#040b1230,transparent 60%,#040b12a0)}
.living-city .hero-final-frame,.living-city .hero-feather,.living-city .hero-spray{display:none}
.living-city .hero-interface{position:relative!important;inset:auto!important;z-index:3!important;max-width:1480px!important;width:100%!important;margin:auto!important;padding:65px 52px 50px!important;transform:none!important;pointer-events:none}
.living-city.is-complete .hero-interface{opacity:1;visibility:visible}
.living-city .hero-interface>*{pointer-events:auto}
.city-eyebrow{font:700 10px/1.6 var(--bryk-font-mono);letter-spacing:.13em;color:#e6e9df;margin:0 0 23px}
.living-city #heroTitle{font-family:BRYK Paint,Arial,sans-serif;font-size:clamp(38px,4.8vw,76px);font-weight:400;line-height:1.36;letter-spacing:0;margin:0 0 38px;max-width:min(870px,calc(68vw - 105px));text-transform:none;overflow:visible}
.city-paint-line{position:relative;display:table;white-space:nowrap;transform:rotate(-1.3deg);color:#eeeee4;filter:drop-shadow(1px 3px 2px #040a0dc0);text-shadow:0 0 1px currentColor}
.city-paint-line+.city-paint-line{margin-top:8px;color:var(--city-accent)}
.living-city #heroTitle .city-paint-text{position:relative;display:inline-block;line-height:1;vertical-align:top;color:inherit;-webkit-text-stroke:clamp(1.2px,.18vw,2.6px) #091017;paint-order:stroke fill;filter:drop-shadow(1px 2px 0 #09101780)}
.city-drip{transform-origin:0 0;animation:cityWetPaint 9s ease-in-out infinite}
.city-paint-bead{animation:cityPaintBead 9s ease-in-out infinite;animation-delay:inherit}
@keyframes cityWetPaint{0%{transform:scaleY(.08);opacity:0}12%{opacity:1}68%,86%{transform:scaleY(1);opacity:1}100%{transform:scaleY(1);opacity:0}}
@keyframes cityPaintBead{0%,65%{transform:translateY(0);opacity:0}78%{opacity:.9}100%{transform:translateY(10px);opacity:0}}
.living-city:not(.is-complete) .city-drip,.living-city[data-paused=true] .city-drip,.living-city[data-paused=true] .city-paint-bead{animation-play-state:paused}
.living-city[data-motion=false] .city-drip,.living-city[data-motion=false] .city-paint-bead,.motion-off .city-drip,.motion-off .city-paint-bead{animation:none}
@media(prefers-reduced-motion:reduce){.city-drip,.city-paint-bead{animation:none!important}}
.living-city #heroTitle::before,.living-city #heroTitle::after{display:none!important}
.city-wet-runs{position:absolute;left:0;top:calc(100% - 17px);height:43px;width:100%;overflow:visible;pointer-events:none}
.city-postal-label{position:relative;isolation:isolate;width:min(570px,100%);background:var(--city-paper);color:var(--city-ink);border:1px solid #fff8;border-radius:3px 3px 16px 3px;transform:rotate(-1.1deg);box-shadow:3px 7px 0 #07101890,0 15px 35px #0005;padding:0 23px 21px;margin:0 0 0 5px}
.city-postal-label::before{content:'';position:absolute;inset:0;z-index:-1;opacity:.14;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)' opacity='.6'/%3E%3C/svg%3E")}
.city-postal-label::after{content:'';position:absolute;right:0;bottom:0;width:26px;height:26px;clip-path:polygon(0 100%,100% 0,100% 100%);background:linear-gradient(135deg,#fdfaf0 45%,#c4c1b5 51%,#132125 80%);border-radius:0 0 15px 0}
.city-postal-top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 -23px 17px;padding:12px 23px 9px;border-top:7px solid var(--city-red);border-bottom:3px solid var(--city-red);color:var(--city-red);font:800 11px/1.25 var(--bryk-font-mono);letter-spacing:.12em}
.city-postal-top small{font:700 8px/1.4 var(--bryk-font-mono);text-align:right;letter-spacing:.06em;color:var(--city-ink)}
.city-postal-top>span{display:flex;gap:10px;align-items:center}.city-postal-arrow{font:900 30px/1 Arial,sans-serif;display:inline-block;color:var(--city-ink)}
.city-postal-service{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:0 0 9px;margin-top:-4px;border-bottom:2px solid var(--city-ink);color:var(--city-ink);font:700 8px/1.4 Arial,sans-serif;letter-spacing:.09em}
.city-postal-service strong{font:900 16px/1.1 Arial,sans-serif;letter-spacing:.025em}
.city-postal-route{padding-top:10px}
.city-postal-route{display:flex;justify-content:space-between;gap:12px;font:700 9px/1.4 var(--bryk-font-mono);letter-spacing:.08em;border-bottom:1px solid #14253638;padding-bottom:9px;margin-bottom:13px}
.city-tagline{font:400 clamp(27px,2.7vw,39px)/1.13 BRYK Tag,'Segoe Print',cursive;letter-spacing:-.02em;transform:rotate(-1deg);margin:0 0 13px;color:var(--city-ink)}
.city-tagline span{display:block}.city-tagline span+span{color:#254c48;margin-top:3px}
.city-hero-body{font:400 21px/1.5 BRYK Tag,'Segoe Print',cursive;margin:0;color:#26333c;max-width:none;letter-spacing:.015em}
.city-collector-line{font:400 23px/1.35 BRYK Tag,'Segoe Print',cursive;margin:0 0 12px;color:var(--city-ink)}
.city-hero-body a,.city-hero-body button{font:inherit;letter-spacing:inherit;color:#244c70;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px;background:none;border:0;padding:0;cursor:pointer}
.city-hero-body button{color:#922f38}.city-hero-body a:hover,.city-hero-body button:hover{text-decoration-thickness:2px}.city-hero-body :focus-visible{outline:2px solid #244c70;outline-offset:3px}
.city-links{display:flex;flex-wrap:wrap;gap:0 17px;border-top:1px solid #14253638;margin-top:15px;padding-top:5px}
.city-links a,.city-links button{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;background:none;border:0;border-radius:0;font:700 12px/1.5 Arial,sans-serif;color:var(--city-link);text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.city-links a:hover,.city-links button:hover{color:var(--city-ink);text-decoration-thickness:2px}
.city-links :focus-visible{outline:3px solid var(--city-link);outline-offset:3px}
.city-postal-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;border-top:3px solid var(--city-ink);padding-top:7px;font:700 8px/1.4 var(--bryk-font-mono);letter-spacing:.06em}
.city-postal-bars{width:90px;height:17px;background:repeating-linear-gradient(90deg,var(--city-ink) 0 2px,transparent 2px 4px,var(--city-ink) 4px 5px,transparent 5px 9px);opacity:.8}
.city-footer-note{margin:30px 0 0 6px;font:700 10px/1.5 var(--bryk-font-mono);letter-spacing:.14em;color:var(--city-accent)}
.city-entry-note{margin:8px 0 0 6px;font:400 11px/1.6 Arial,sans-serif;color:#e5e9e3}
.living-city .hero-scroll{display:none}.living-city .hero-tools{z-index:4;inset:auto 22px 18px auto;height:44px}.living-city:not(.is-complete) .hero-tools{inset:max(18px,env(safe-area-inset-top,0px)) max(22px,env(safe-area-inset-right,0px)) auto auto}
.city-explanation{inset:0;margin:auto;width:min(500px,calc(100% - 32px));max-height:calc(100dvh - 48px);overflow:auto;border:1px solid #c0ef5170;border-radius:3px;padding:28px;background:#101a21;color:#e8ece5;box-shadow:0 24px 90px #000b;font:400 16px/1.6 Arial,sans-serif}
.city-explanation::backdrop{background:#040b1290;backdrop-filter:blur(3px)}
.city-explanation h2{font:400 28px/1.2 BRYK Tag,Arial,sans-serif;color:#c0ef51;margin:8px 38px 20px 0}
.city-explanation p{margin:14px 0}.city-explanation a{color:#c0ef51;text-decoration:underline}.city-explanation .city-tip-close{float:right;min-height:44px;min-width:44px;background:transparent;border:1px solid #81908a;color:white;cursor:pointer;font-size:20px}.city-tip-close:hover{border-color:#c0ef51}.city-explanation :focus-visible{outline:3px solid #c0ef51;outline-offset:3px}
.city-window-group{animation:cityWindows var(--period,12s) ease-in-out infinite;animation-delay:var(--delay,0s);opacity:.25;filter:drop-shadow(0 0 2px #ffe6a0)}
@keyframes cityWindows{0%,100%{opacity:.1}16%,29%{opacity:.9}43%{opacity:.22}64%,73%{opacity:1}87%{opacity:.3}}
.city-sky{position:absolute;left:0;top:12px;width:100%;height:140px;max-width:none;overflow:visible;z-index:2;pointer-events:none}
.city-blimp{animation:cityBlimp 65s linear infinite;animation-delay:-23s;filter:drop-shadow(3px 8px 5px #07111c70)}
/* Rounded nose faces left; reset happens only after the tail exits the clipped sky. */
@keyframes cityBlimp{from{transform:translate(var(--city-flight-width,1500px),0)}to{transform:translate(-440px,0)}}
.city-ticker-copy{font:900 25px/1 monospace;letter-spacing:1px;fill:url(#city-led-dots);stroke:#11242c;stroke-width:1.2;paint-order:stroke fill;filter:drop-shadow(0 0 1px #ffcf6590)}
.city-ticker-track{animation:cityTicker 16s linear infinite}
@keyframes cityTicker{0%,18%{transform:translateX(0)}90%,100%{transform:translateX(-360px)}}
.city-helicopter{animation:cityHelicopter 42s linear infinite;animation-delay:-5s;transform:translate(560px,162px);opacity:1;filter:drop-shadow(2px 5px 4px #07111c60)}
@keyframes cityHelicopter{0%{transform:translate(-75px,162px)}65%,100%{transform:translate(calc(var(--city-flight-width,1500px) + 75px),162px)}}
.city-heli-light,.city-rail-signal{animation:citySignal var(--period,4s) ease-in-out infinite;animation-delay:var(--delay,0s)}
@keyframes citySignal{0%,100%{opacity:.25}35%,55%{opacity:1}80%{opacity:.3}}
.city-heli-searchlight{fill:#f4edbd;opacity:.12}
.city-rotor{transform-origin:-6px -22px;animation:cityRotor 1.4s ease-in-out infinite}
@keyframes cityRotor{50%{transform:scaleX(.65)}}
.city-beacon{animation:cityBeacon 7s ease-in-out infinite;animation-delay:var(--delay,0s);opacity:.25}
@keyframes cityBeacon{0%,35%,100%{opacity:.2}65%,75%{opacity:.85}}
.living-city[data-beacons=false] .city-beacons,.living-city[data-helicopter=false] .city-helicopter{display:none}
.living-city[data-motion=false] .city-sky *,.living-city[data-paused=true] .city-sky *,.motion-off .city-sky *{animation-play-state:paused!important}
.living-city[data-motion=false] .city-ticker-track,.motion-off .city-ticker-track{animation:none;transform:none}
.city-steam{animation:citySteam 14s ease-in-out infinite;transform-origin:center;opacity:.14}
@keyframes citySteam{0%,100%{transform:translate(0,0);opacity:.1}50%{transform:translate(6px,-11px);opacity:.23}}
.living-city[data-lights=false] .city-window-group{display:none}.living-city[data-blimp=false] .city-blimp{display:none}.living-city[data-train=false] .city-train{display:none}
.living-city[data-motion=false] .city-atmosphere *,.living-city[data-paused=true] .city-atmosphere *,.motion-off .city-atmosphere *{animation-play-state:paused!important}
.city-home .bryk-chrome .motion-toggle{position:static;inset:auto;box-shadow:none;width:100%;margin:8px 0 0;border-radius:0;justify-content:flex-start;min-height:44px}
.city-home .bryk-chrome .motion-toggle__copy{position:static;width:auto;height:auto;clip:auto;overflow:visible;white-space:normal}
body.city-home .living-city .hero-interface{background:transparent}
body.city-home .living-city .city-tagline{font:400 clamp(27px,2.7vw,39px)/1.13 BRYK Tag,'Segoe Print',cursive}
body.city-home .living-city .city-eyebrow{font:700 10px/1.6 var(--bryk-font-mono)}
body.city-home .living-city .city-footer-note{font:700 10px/1.5 var(--bryk-font-mono)}
body.city-home .living-city .city-entry-note{font:400 11px/1.6 Arial,sans-serif}
@media(max-width:900px){.city-sky{top:12px;right:24px;width:340px;max-width:calc(100% - 48px)}.living-city .hero-interface{padding:132px 30px 50px!important}.living-city #heroTitle{font-size:6.8vw;max-width:100%}.living-city{min-height:830px!important}}
@media(max-width:600px){.living-city{min-height:0!important}.living-city .hero-interface{padding:34px 20px 48px!important}.living-city #heroTitle{font-size:clamp(28px,8.4vw,47px);line-height:1.32;margin-bottom:34px}.city-paint-line+.city-paint-line{margin-top:12px}.city-wet-runs{height:29px;top:calc(100% - 9px)}.city-eyebrow{font-size:8px;letter-spacing:.08em;max-width:260px}.city-postal-label{width:calc(100% - 4px);padding:0 17px 20px;margin-left:2px;transform:rotate(-.8deg)}.city-postal-top{margin-left:-17px;margin-right:-17px;padding:10px 17px 8px;font-size:10px}.city-postal-top small{font-size:7px}.city-postal-route{font-size:7px}.city-tagline{font-size:28px}.city-hero-body{font-size:14px;line-height:1.7}.city-links{display:grid;gap:0}.city-footer-note{font-size:9px;margin-top:24px}.city-entry-note{font-size:10px}.city-scene>img,.city-atmosphere{object-position:60% center}.city-scene::after{background:linear-gradient(90deg,#040b1290,#040b1235),linear-gradient(180deg,#040b1210,transparent 60%,#040b12aa)}.city-postal-bottom{font-size:7px}.city-postal-bars{width:65px}}
@media(max-width:600px){.living-city .hero-interface{padding-top:126px!important}.living-city #heroTitle{font-size:7.1vw;line-height:1.45}.city-sky{right:20px;max-width:calc(100% - 40px)}.city-collector-line{font-size:13px}}
@media(prefers-reduced-motion:reduce){.city-atmosphere *,.city-sky *{animation:none!important}.city-ticker-track{transform:none!important}.city-helicopter{opacity:.65}.living-city .city-scene{transition:none}.city-paint-text{filter:none}}
@media(forced-colors:active){.city-scene,.city-wet-runs,.city-postal-bars{display:none}.city-postal-label,.city-explanation{background:Canvas;color:CanvasText;border:1px solid CanvasText;box-shadow:none}.city-postal-label::after,.city-postal-label::before{display:none}.city-paint-line,.city-tagline,.city-tagline span+span,.city-hero-body{color:CanvasText;filter:none}.city-links a,.city-links button{color:LinkText}}

@media(max-width:600px){.city-hero-body{font-size:19px;line-height:1.5}.city-collector-line{font-size:20px}.city-postal-service strong{font-size:13px}.city-postal-service>span{font-size:7px}.city-postal-top{font-size:11px}}

/* Keep aircraft in a full-width reserved lane; only the city edge clips flight. */
.living-city .city-sky{left:0;right:auto;top:12px;width:100%;max-width:none;height:140px}
.living-city .hero-interface{padding-top:176px!important}
@media(max-width:600px){.living-city .city-sky{height:110px}.living-city .hero-interface{padding-top:146px!important}}
@media(prefers-reduced-motion:reduce){.city-blimp{transform:translate(calc(var(--city-flight-width,700px) / 2 - 210px),0)}.city-helicopter{transform:translate(calc(var(--city-flight-width,700px) / 2 + 110px),162px)}}
.city-heli-light--red{--period:3.6s}.city-heli-light--blue{--period:4.7s;--delay:-2s}
