@font-face{font-family:Anton;src:url('assets/fonts/anton.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#fcfbf9;--cream:#fcfbf9;--paprika:#9b2713;--ink:#1c2320;--intro-ground:var(--paprika);--accent:var(--paprika);--ui:system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",Arial,sans-serif;--pad:clamp(24px,4.5vw,76px);--pad-left:max(var(--pad),calc(env(safe-area-inset-left) + 12px));--pad-right:max(var(--pad),calc(env(safe-area-inset-right) + 12px));--scene-top:max(min(clamp(72px,calc(1.25vw + 64.5px),80px),max(66px,12svh)),calc(env(safe-area-inset-top) + 52px));--scene-bottom:max(min(clamp(64px,calc(76px - 1vw),70px),max(32px,calc(20svh - 80px))),calc(env(safe-area-inset-bottom) + 20px));color:var(--ink);background:var(--paper);font-family:var(--ui);font-synthesis:none;color-scheme:light;-webkit-text-size-adjust:100%;text-size-adjust:100%}
*{box-sizing:border-box}
html,body{width:100%;height:100%;margin:0;overflow:hidden}
body{height:100svh;min-height:280px}
button,a{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
button:focus-visible,a:focus-visible{outline:2px solid currentColor;outline-offset:5px}
.controls button:active,.controls a:active{background:color-mix(in srgb,var(--ink) 8%,transparent)}
.signup-row button:not(:disabled):not([aria-disabled="true"]):active{background:color-mix(in srgb,var(--ink) 86%,var(--paper));box-shadow:inset 0 0 0 1px rgb(0 0 0 / .14)}
[hidden]{display:none!important}
.controls{position:fixed;z-index:20;left:var(--pad-left);right:var(--pad-right);top:max(clamp(12px,2vw,18px),calc(env(safe-area-inset-top) + 8px));display:flex;align-items:center;justify-content:space-between;gap:clamp(18px,3vw,22px);font-family:var(--ui);font-size:12px;line-height:1.2;letter-spacing:.015em;color:var(--ink)}
.controls button,.controls a{min-height:44px;min-width:44px;padding:10px 0;display:inline-flex;align-items:center;gap:12px}
.controls #playback{width:64px;flex:none;justify-content:center;font-variant-numeric:tabular-nums;margin-left:auto}
:root[data-state="finished"] .controls #playback{justify-content:flex-end}
.controls{background:var(--paper)}
:root[data-state="playing"] .controls,:root[data-state="paused"] .controls,:root[data-boot="motion"] .controls{background:transparent}
:root[data-control-tone="cities"] .controls{color:var(--cream)}
.scene{position:absolute;inset:0;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:var(--scene-top) var(--pad-right) var(--scene-bottom) var(--pad-left);background:var(--paper);isolation:isolate}
.city-scene{z-index:0;color:var(--cream);background:var(--intro-ground)}
.city-composition{width:100%;font-family:Anton,sans-serif;font-size:min(28vw,31svh);line-height:1.04;letter-spacing:-.025em;padding-bottom:.08em}
.city-composition,.question{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hello{position:relative;z-index:2}
.city-window{position:relative;margin-left:calc(-1 * var(--pad-left));margin-right:calc(-1 * var(--pad-right));height:1.26em;overflow:hidden;contain:layout paint}
.city-train{position:absolute;left:0;top:0;display:flex;align-items:baseline;gap:clamp(100px,14vw,230px);width:max-content;height:100%;white-space:nowrap}
.city-name{text-transform:uppercase;display:block;flex:none;line-height:1.1;padding-top:.03em}
.question-scene{z-index:1;color:var(--accent)}
.city-bridge{position:fixed;inset:0;z-index:10;pointer-events:none;user-select:none}
.city-bridge>div{position:absolute;inset:0;overflow:hidden}
.city-bridge span{position:absolute;left:0;top:0;display:block;font-family:Anton,sans-serif;font-weight:400;line-height:1;white-space:nowrap;transform-origin:0 0}
.bridge-light{color:var(--cream)}
.bridge-dark{color:var(--accent)}
.invitation-scene{z-index:2}
.invitation-frame{position:absolute;inset:0;z-index:2;overflow:hidden;pointer-events:none}
.invitation-frame .invitation-scene{pointer-events:auto}
.question{font-family:Anton,sans-serif;font-size:min(17vw,calc(10vw + 27px),17.4svh);font-weight:400;line-height:1.16;letter-spacing:-.018em;width:100%;margin:0}
.question>span{display:block;white-space:nowrap}
.category-window{height:1.36em;margin-block:.04em;overflow:hidden;color:var(--ink);position:relative;contain:layout paint}
.category-train{display:flex;flex-direction:column}
.category-train>span{display:flex;align-items:center;height:1.36em;flex-shrink:0;white-space:nowrap}
.category-label{display:block;flex:none;line-height:1.16}
@supports(text-box-trim:trim-both){.category-label{text-box-trim:trim-both;text-box-edge:cap alphabetic}}
:root[data-state="playing"][data-active="cities"] .city-train,:root[data-state="playing"][data-active="question"] .category-train{will-change:transform}
.invitation-scene{padding-top:max(min(clamp(72px,calc(7vw + 30px),100px),max(66px,calc(20svh - 40px))),calc(env(safe-area-inset-top) + 52px));overflow-y:auto;overscroll-behavior-y:contain;align-items:flex-start;scroll-padding-block:70px}
.invitation-content{position:relative;width:100%;text-align:center;margin-block:auto}
.invitation-crown{position:absolute;display:block;bottom:calc(100% + clamp(12px,2svh,18px));left:50%;transform:translateX(-50%);width:clamp(30px,3vw,39px);height:auto;aspect-ratio:40/31;background:var(--accent);-webkit-mask:url('assets/chowlore-crown.svg') center/contain no-repeat;mask:url('assets/chowlore-crown.svg') center/contain no-repeat;opacity:.78;pointer-events:none;user-select:none}
.wordmark{display:flex;justify-content:center;align-items:baseline;font-family:Anton,sans-serif;color:var(--accent);font-size:min(23.5vw,max(48px,min(30svh,calc(38svh - 56px))));font-weight:400;line-height:1.13;letter-spacing:-.033em;margin:0;white-space:nowrap}
.wordmark:focus{outline:none}
.wordmark:focus-visible{outline:2px solid currentColor;outline-offset:10px}
.signature{font-family:var(--ui);font-style:normal;font-weight:500;font-size:min(max(clamp(16px,4.6vw,23px),min(3.2vw,42px)),calc((100vw - var(--pad-left) - var(--pad-right) - 12px)/17.8));line-height:1.3;margin:clamp(8px,calc(36px - 3vw),18px) 0 0;letter-spacing:-.025em}
.signature{white-space:nowrap}
.signature>span{display:inline}
.signup-preview{position:relative;width:min(100%,560px);margin:clamp(24px,calc(12svh - 32px),72px) auto 0}
.signup-row{display:grid;grid-template-columns:minmax(0,1fr) auto;text-align:left;border:1px solid color-mix(in srgb,var(--ink) 50%,transparent);padding:clamp(4px,.8vw,6px);gap:clamp(4px,1.3vw,8px);font-family:var(--ui);font-size:clamp(12px,calc(9px + 1.2vw),16px);line-height:1.2;letter-spacing:-.015em}
.signup-row:focus-within{border-color:var(--ink)}
.signup-row input[type="email"]{width:100%;min-width:0;border:0;border-radius:0;padding:0 clamp(8px,2.2vw,15px);background:transparent;color:var(--ink);font:inherit;font-size:max(16px,1em);line-height:1.2;letter-spacing:inherit;outline:0}
.signup-row input[type="email"]::placeholder{color:color-mix(in srgb,var(--ink) 72%,transparent);opacity:1}
.signup-honeypot{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.signup-row button{min-height:clamp(44px,calc(36px + 3vw),52px);min-width:clamp(0px,24vw,154px);padding:12px clamp(9px,2.8vw,18px);white-space:nowrap;display:flex;align-items:center;justify-content:space-between;gap:clamp(7px,2vw,16px);background:var(--ink);color:var(--paper);font-weight:500;transition:background-color .16s ease,box-shadow .16s ease}
.signup-button-label{display:inline-grid}
.signup-button-measure,.signup-button-state{grid-area:1/1}
.signup-button-measure{visibility:hidden}
.signup-row button:focus-visible{outline-color:var(--ink);outline-offset:4px}
.signup-arrow,.control-arrow{width:clamp(13px,3.5vw,16px);height:clamp(13px,3.5vw,16px);flex:none;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round}
.signup-arrow{transition:transform .18s ease}
.control-arrow{width:13px;height:13px}
.signup-row button:disabled,.signup-row button[aria-disabled="true"]{cursor:default;background:color-mix(in srgb,var(--ink) 15%,transparent);color:color-mix(in srgb,var(--ink) 60%,transparent)}
.signup-caption{font-family:var(--ui);font-size:12px;line-height:1.45;min-height:2.9em;margin:clamp(10px,1.9svh,14px) 0 0;color:color-mix(in srgb,var(--ink) 80%,transparent);text-wrap:balance}
.signup-feedback{position:absolute;top:100%;inset-inline:0;font-family:var(--ui);font-size:11px;line-height:1.4;margin:6px 0 0;color:var(--ink);text-wrap:balance}
.signup-noscript{position:absolute;top:100%;inset-inline:0;font-family:var(--ui);font-size:11px;line-height:1.4;margin:6px 0 0;color:var(--ink);text-wrap:balance}
@media(hover:hover) and (pointer:fine){
 .controls button:hover,.controls a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
 .signup-row button:not(:disabled):not([aria-disabled="true"]):hover{background:color-mix(in srgb,var(--ink) 90%,var(--paper))}
 .signup-row button:not(:disabled):not([aria-disabled="true"]):hover .signup-arrow{transform:translate(1px,-1px)}
}
.progress{position:fixed;bottom:0;left:0;width:100%;height:2px;z-index:30;pointer-events:none;opacity:0}
.progress span{display:block;width:100%;height:100%;background:currentColor;transform:scaleX(0);transform-origin:left}
:root[data-state="playing"] .progress,:root[data-state="paused"] .progress{opacity:.45}
:root[data-active="cities"] .progress{color:var(--cream)}
:root[data-active="invitation"] .progress{opacity:0}
:root[data-active="invitation"] .controls{background:var(--paper)}
:root[data-boot="motion"] .invitation-scene{visibility:hidden}
:root[data-boot="motion"] .city-scene{display:flex!important}
:root[data-boot="motion"] .city-composition,:root[data-boot="motion"] .controls{visibility:hidden}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important}.signup-row button,.signup-arrow{transition:none!important}}
@media(prefers-contrast:more){.signup-row{border-color:var(--ink)}.signup-row input[type="email"]::placeholder,.signup-caption{color:var(--ink)}.progress{height:3px}}
@media(forced-colors:active){.signup-row{border-color:ButtonText}.signup-row button{border:1px solid ButtonText}.signup-row button:disabled,.signup-row button[aria-disabled="true"]{color:GrayText}.wordmark,.signature,.signup-caption{color:CanvasText}}

/* Approved two-screen introduction and invitation. */
.intro-scene{z-index:0;background:var(--intro-ground);color:var(--cream)}
.intro-heading{--intro-row:1.18em;width:100%;margin:0;font-family:Anton,sans-serif;font-weight:400;font-size:min(14.5vw,13.1svh,150px);line-height:1.05;letter-spacing:-.02em;user-select:none;-webkit-user-select:none}
.intro-heading>span{display:flex;align-items:center;height:var(--intro-row);margin-block:0;white-space:nowrap}
.greeting,.question-lead,.favorite{width:max-content;max-width:100%}
.city-aperture{position:relative;overflow:hidden;contain:layout paint}
.city-reel{position:absolute;inset:0 auto auto 0;width:100%;display:flex;flex-direction:column}
.city-reel>span{display:flex;align-items:center;flex:none;height:var(--intro-row);line-height:1.05;white-space:nowrap}
.city-reel b{font-weight:400;display:block;line-height:1.05}
.category-aperture{position:relative;margin-left:calc(-1 * var(--pad-left));overflow:hidden;contain:layout paint;mask-image:linear-gradient(to right,transparent,#000 10px,#000 calc(100% - 12px),transparent)}
.favorite-reel{position:absolute;left:0;top:0;display:flex;align-items:center;gap:clamp(64px,7vw,96px);width:max-content;height:100%;white-space:nowrap}
.favorite-reel>span{flex:none;display:flex;align-items:center;height:100%;line-height:1.05}
:root[data-reel="cities"] .city-reel,:root[data-reel="favorites"] .favorite-reel{will-change:transform}
:root[data-active="intro"] .controls,:root[data-active="intro"] .progress{color:var(--cream)}
:root[data-boot="motion"] .intro-scene{display:flex!important}
:root[data-boot="motion"] .intro-heading{visibility:hidden}
.invitation-crown{width:clamp(35px,3.45vw,45px);bottom:calc(100% + clamp(8px,calc(2svh - 4px),14px));opacity:.9}
.signature{font-size:min(clamp(22px,4.25vw,44px),calc((100vw - var(--pad-left) - var(--pad-right) - 12px)/17.8));font-weight:450;letter-spacing:-.03em}
.signup-preview{width:min(100%,520px);margin-top:clamp(28px,5.4svh,48px)}
.signup-row input[type="email"]{min-height:56px}
.signup-row input[type="email"]::placeholder{color:color-mix(in srgb,var(--ink) 70%,transparent)}
.signup-row button{min-height:56px;padding-inline:clamp(10px,2.5vw,18px)}
.signup-caption{font-size:13px;line-height:1.5;margin-top:16px;color:color-mix(in srgb,var(--ink) 82%,transparent)}
:root[data-state="finished"] .controls #playback{color:color-mix(in srgb,var(--ink) 65%,transparent)}
:root[data-state="finished"] .controls #playback:focus-visible{color:var(--ink)}
@media(hover:hover) and (pointer:fine){:root[data-state="finished"] .controls #playback:hover{color:var(--ink)}}
@media(forced-colors:active){.signup-caption,:root[data-state="finished"] .controls #playback{color:CanvasText}}
@media(forced-colors:active){.intro-scene{background:Canvas;color:CanvasText}}
/* NIGHT (his, 27 Sept: "a dark mode that is our ink and goes to black and white instead of red and white"): the app's night — the ink ground, linen words, every red word white; the page rises over the ink with a shadow at its edge */
@media(prefers-color-scheme:dark){:root{--paper:#1c2320;--cream:#fcfbf9;--ink:#fcfbf9;--intro-ground:#1c2320;--accent:#fcfbf9;color-scheme:dark}.invitation-frame{box-shadow:0 -28px 56px -18px rgb(0 0 0 / .6)}}
@media(forced-colors:active){.invitation-crown{background:CanvasText;forced-color-adjust:none}}