/* A small voice, with room around it. */
@font-face{font-family:"DM Sans";src:url('./assets/dm-sans-regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
:root{--paper:#ffffff;--ink:#474641;--muted:#79766e;--line:#d9d3c9;--accent:#73685c;--soft:#ece8e0;--font:"DM Sans","Helvetica Neue",Arial,sans-serif}
.wordmark{font-size:14px;font-weight:400;letter-spacing:.02em;top:35px;left:40px;color:var(--muted)}
.landing{padding:118px 24px 66px}
.landing-content{max-width:600px}
.landing blockquote{font-size:20px;font-weight:400;line-height:1.8;letter-spacing:.005em;animation:none;margin:0 auto 26px;color:var(--ink)}
.landing blockquote span{color:inherit}
.quote-word{display:inline-block;white-space:pre;animation:spoken-word .95s var(--word-delay,1.4s) both}
.attribution{display:inline-block;font-size:12px;font-weight:400;letter-spacing:.025em;animation:gentle-appear .9s var(--attribution-delay,5.6s) both}
.attribution span{margin:0 5px}
.city-picker{width:252px;margin:45px auto 0;min-height:125px;animation:gentle-appear .9s var(--picker-delay,7.6s) both}
.select-wrap:after{right:21px;top:20px;width:6px;height:6px;border-width:1px;border-color:var(--muted)}
select{border:1px solid var(--line);border-radius:30px;background:transparent;padding:15px 43px 15px 22px;font-size:14px;line-height:1.5;min-height:51px}
select:has(option[value=""]:checked){color:var(--muted)}
.primary{border:1px solid transparent;border-radius:30px;padding:16px 23px;background:var(--soft);color:var(--ink);font-size:14px;font-weight:400;line-height:1.5;justify-content:center;gap:12px;transition:background .25s,color .25s,transform .25s}
.primary:hover{background:#e2dcd2;border-color:transparent;color:var(--ink)}
.primary:disabled{opacity:.4}
.begin{margin-top:15px;font-size:13px;animation:gentle-appear .65s both}
#app{transition:opacity .25s,transform .25s}
#app.leaving{transform:translateY(-2px)}
.intro h1{font-size:clamp(28px,3vw,40px);font-weight:400;letter-spacing:-.025em;line-height:1.5}
.intro h1 span{font-size:.8em;font-weight:400;line-height:1.9}
.intro-continue{font-size:13px;margin-top:25px}
.revisited .quote-word,.revisited .attribution,.revisited .city-picker{animation-delay:0s;animation-duration:.35s}
.eyebrow{text-transform:none;letter-spacing:.025em;font-size:13px;font-weight:400}
.question{padding-top:160px;padding-bottom:58px}
.question-content{max-width:1080px}
.question-framing{text-align:center;margin-bottom:50px;animation:gentle-appear .35s both}
.question-context{color:var(--muted);font-size:13px;margin:0 0 12px}
.question-heading{font-size:23px;line-height:1.5;font-weight:400;letter-spacing:-.025em;margin:0}
.intro-guidance{font-size:15px;line-height:1.8;color:var(--muted);margin:26px 0 0}
.question-eyebrow{margin-bottom:62px}
.choices{grid-template-columns:minmax(0,1fr) 80px minmax(0,1fr);gap:12px}
.choice{border:0;border-radius:30px;padding:27px 23px 31px;min-height:250px;transition:background .2s,color .2s}
.choice-letter{font-size:12px;letter-spacing:0;margin-bottom:25px;color:var(--muted)}
.choice-main,.choice-detail{font-size:clamp(25px,2.6vw,38px);line-height:1.4;font-weight:400;letter-spacing:-.025em}
.choice-detail{color:var(--muted)}
.choice-or{text-transform:lowercase;font-size:13px;color:var(--muted);letter-spacing:0}
.choice-arrow{display:none}
.choice.chosen,.choice:focus-visible{background:var(--soft);color:var(--ink)}
.choice.chosen .choice-detail,.choice:focus-visible .choice-detail{color:var(--accent)}
.progress-dot{width:5px;height:5px;border:0;background:#d3cec4}
.progress-dot.current{background:var(--accent)}
.progress-dot.completed{background:#b9b2a6}
.question-hint{color:var(--muted)}
.wordmark.exploring{left:102px;top:43px;font-size:14px}
.screen-tools{inset:28px 40px auto}
.icon-button{border-radius:50%;border:0;background:var(--soft)}
.icon-button:hover{background:#e2dcd2}
.text-button:hover{color:var(--ink)}
.restart{font-size:12px}
.result-copy{padding-top:164px}
.result-copy .eyebrow{font-size:13px;letter-spacing:.025em;color:var(--muted);margin-bottom:23px}
.result-copy h1{font-family:Georgia,"Times New Roman",serif;font-size:clamp(64px,7vw,110px);font-weight:400;line-height:1.04;letter-spacing:-.055em}
.reading-panel{border:0;border-radius:0;background:transparent;padding:25px 13px;margin-top:130px}
.reading-panel h2{font-size:18px;font-weight:400;letter-spacing:-.01em}
.values{gap:21px}
.value-label{font-size:12px;letter-spacing:.01em;text-transform:none}
.value-track{height:2px;border-radius:4px;background:var(--line)}
.value-track>span{border-radius:4px;background:var(--accent)}
.value:first-child .value-label{color:var(--ink)}
.agreement{font-size:16px;font-weight:400;border:0;line-height:1.65;padding-top:10px;margin-bottom:25px}
.agreement strong{font-weight:400;color:var(--ink)}
.city-story{font-size:22px;line-height:1.6;letter-spacing:-.025em}
.city-panel .eyebrow{font-size:13px;letter-spacing:.025em}
.city-currency>div{border-color:var(--line)}
.city-art{opacity:.9}
.art-container{animation:ink-arrival 1s .35s both}
.demo-note{line-height:1.7;color:var(--muted)}
.poster-caption{font-size:12px;letter-spacing:0}
.map-heading .eyebrow{font-size:13px;letter-spacing:.015em}
.map-heading h1{font-size:clamp(30px,3.2vw,48px);font-weight:400;letter-spacing:-.025em}
.map-controls{border:0;border-radius:24px;background:var(--soft);overflow:hidden;padding:4px 2px}
.map-control{height:42px;width:42px}
.map-control+.map-control,.map-reset{border-color:#d9d3c9}
.map-reset{font-size:11px}
.marker-label{border-radius:16px;padding:6px 10px}
.marker-dot{width:8px;height:8px}
@keyframes ink-arrival{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover){.choice:hover{background:var(--soft);color:var(--ink)}.choice:hover .choice-detail{color:var(--accent)}.choice:hover .choice-copy{transform:none}}
@media(max-width:1100px) and (min-width:761px){.result-copy h1{font-size:clamp(53px,6.5vw,76px)}.art-container{height:auto;top:340px}.choices{grid-template-columns:minmax(0,1fr) 38px minmax(0,1fr);gap:8px}.choice{padding:24px 14px}.poster-caption{font-size:11px}}
@media(max-width:760px){
  .question-framing{margin-bottom:25px}.question-heading{font-size:20px}.question-context{font-size:12px;margin-bottom:9px}.intro-guidance{font-size:14px}
  .wordmark.exploring{left:81px;top:33px;font-size:13px}.screen-tools{inset:20px 25px auto}.restart{font-size:12px}
  .question{padding:131px 23px 40px}.question-eyebrow{font-size:12px;letter-spacing:.01em;margin-bottom:26px}.choices{grid-template-columns:1fr;gap:5px}.choice{min-height:0;padding:20px 19px 23px;border-radius:26px}.choice-letter{font-size:11px;margin-bottom:15px}.choice-main,.choice-detail{font-size:clamp(25px,5.5vw,34px);line-height:1.4}.choice-or{margin:0;font-size:12px}.choice-copy{padding:0}.question-bottom{margin-top:32px}.question-hint{font-size:12px}
  .result-copy{padding-top:130px}.result-copy h1{font-size:clamp(57px,12vw,87px)}.result-copy .eyebrow{font-size:12px}.reading-panel{margin:9px 0 35px;padding:26px 12px}.reading-panel h2{font-size:20px}.poster-caption{font-size:10px}.city-story{font-size:22px}.art-container{top:260px}.city-poster{min-height:625px}
  .map-heading .eyebrow{font-size:12px}.map-heading h1{font-size:37px}.map-controls{right:23px;bottom:27px}.map-control{width:40px;height:40px}.marker-label{font-size:11px}.map-instructions{font-size:12px}
}
@keyframes spoken-word{from{opacity:0;filter:blur(2px)}to{opacity:1;filter:blur(0)}}
@keyframes gentle-appear{from{opacity:0;visibility:hidden}to{opacity:1;visibility:visible}}
@media(max-width:760px){.wordmark{font-size:13px;left:26px;top:28px}.landing{padding:108px 24px 52px}.landing blockquote{font-size:18px;line-height:1.9;letter-spacing:0}.attribution{font-size:11px}.city-picker{margin-top:42px;width:252px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-delay:0ms!important;transition-duration:.01ms!important}}

/* The supporting details stay quiet until someone asks for them. */
.landing-note{margin-top:23px;color:var(--muted);font-size:11px;line-height:1.7;text-align:center}
.landing-note p{margin:0 0 5px}.landing-note .text-button{font-size:11px;margin-top:4px;display:block;width:100%;text-align:center}
.landing-note .resume-reading{margin-top:15px;color:var(--ink)}
.method-link{font-size:11px;margin-top:21px;color:var(--muted);text-decoration:underline;text-underline-offset:4px}
.comparison-sample{display:block;font-size:11px;color:var(--muted);margin-top:9px;line-height:1.7}
.community-reading{margin:29px 0 33px}.community-reading h2{font-size:15px;margin:0 0 24px}.community-reading .values{gap:14px}
.empty-city{font-size:15px;line-height:1.8;color:var(--muted)}
.saving{display:grid;place-items:center;padding:140px 26px 90px;text-align:center;min-height:100svh}
.quiet-state{max-width:480px;animation:gentle-appear .45s both}.quiet-state h1{font-size:clamp(26px,4vw,40px);font-weight:400;letter-spacing:-.035em;line-height:1.4}
.quiet-state p{font-size:14px;line-height:1.8;color:var(--muted);margin:22px 0}.quiet-state .primary{margin:28px auto 0}.quiet-state .text-button{display:block;margin:25px auto 0;font-size:13px}
.method-dialog{width:min(620px,calc(100vw - 36px));max-height:85svh;overflow-y:auto;border:1px solid var(--line);border-radius:26px;padding:38px 40px;background:#fff;color:var(--ink);font-family:var(--font)}
.method-dialog::backdrop{background:rgba(40,38,34,.18)}.method-dialog h2{font-family:Georgia,serif;font-size:30px;font-weight:400;margin:34px 0 23px;letter-spacing:-.025em}.method-dialog h3{font-size:15px;font-weight:400;margin:29px 0 10px}
.method-dialog p{font-size:13px;color:var(--muted);line-height:1.9;margin:9px 0}.close-method{display:block;margin-left:auto;font-size:12px}.method-mapping{display:grid;grid-template-columns:1fr 1fr;gap:10px 20px;margin:24px 0}.method-mapping>div{display:flex;gap:14px}.method-mapping>div>span{font-size:11px;color:var(--muted);margin-top:13px}.method-mapping p{font-size:12px;margin:5px 0}
@media(max-width:760px){.method-dialog{padding:25px}.method-mapping{grid-template-columns:1fr}.community-reading{margin-top:24px}}