/* Intentionally neutral map surface: fixture-only, not a geographic safety layer. */
:root { --ink:#15211b; --paper:#f1eee4; --panel:#fbf9f2; --lime:#ddeb57; --orange:#e96b42; --muted:#627064; --line:#c5c1b3; --map:#c8ccc8; --map-deep:#aab1ad; --night:#13201d; --night-paper:#e8eadc; --shadow:0 16px 40px rgba(21,33,27,.08); }
* { box-sizing:border-box; } html { background:var(--paper); color:var(--ink); font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } body { min-width:320px; margin:0; overflow-x:hidden; background:var(--paper); } button,select,textarea { font:inherit; } button { cursor:pointer; } a { color:inherit; text-decoration-color:var(--orange); text-underline-offset:3px; } a:hover { color:var(--orange); }
.shell { width:min(1180px,calc(100% - 48px)); margin:0 auto; padding:28px 0 68px; }.masthead { display:grid; grid-template-columns:minmax(240px,.78fr) minmax(320px,1.22fr); gap:56px; align-items:end; padding:34px 0 38px; border-bottom:1px solid var(--ink); }.eyebrow { margin:0 0 10px; color:var(--muted); font:500 .68rem/1.25 "DM Mono",monospace; letter-spacing:.09em; } h1,h2,h3,p { overflow-wrap:anywhere; } h1 { margin:0; font:700 clamp(4rem,9vw,7.5rem)/.75 "Playfair Display",Georgia,serif; letter-spacing:-.08em; } h1 em { color:var(--orange); font-weight:600; } h2 { margin:0; font:700 clamp(1.65rem,3vw,2.8rem)/.98 "Playfair Display",Georgia,serif; letter-spacing:-.045em; } h3 { font-size:1.22rem; letter-spacing:-.03em; }.masthead-copy { max-width:570px; font-size:1.02rem; line-height:1.6; }.masthead-copy p { margin:0 0 10px; }.display-disclosure { font-size:.78rem; color:var(--muted); }.mode-toggle,.map-toolbar button,form button { border:1px solid var(--ink); border-radius:0; background:transparent; color:var(--ink); padding:10px 13px; font-weight:700; transition:background .2s,color .2s,transform .2s; }.mode-toggle { margin-top:10px; }.mode-toggle:hover,.map-toolbar button:hover,form button:hover { background:var(--ink); color:var(--paper); transform:translateY(-1px); }
.notice { display:grid; grid-template-columns:150px 1fr; gap:18px; margin:24px 0 56px; padding:13px 16px; border-left:4px solid var(--orange); background:#f7d8cb; font-size:.84rem; line-height:1.5; }.notice strong { font:500 .68rem/1.5 "DM Mono",monospace; letter-spacing:.08em; }.briefing { display:grid; grid-template-columns:180px minmax(0,1fr); gap:34px; padding-bottom:62px; }.briefing-label { border-top:1px solid var(--line); padding-top:12px; }.briefing-label span { color:var(--orange); font:500 .75rem "DM Mono",monospace; }.briefing-label h2 { margin-top:18px; font:700 1.4rem/.95 "DM Mono",monospace; letter-spacing:-.08em; }.briefing-label p { color:var(--muted); font-size:.78rem; }
.city,.ad-slot,.report { border:1px solid var(--line); background:var(--panel); }.city { position:relative; min-height:278px; padding:22px; display:flex; flex-direction:column; }.city h3 { margin:20px 0 7px; }.city>p { margin:0; font-size:.86rem; line-height:1.55; }.city .meta { margin-top:auto; padding-top:20px; color:var(--muted); font:.63rem/1.55 "DM Mono",monospace; }.city.detail { min-height:230px; padding:28px; box-shadow:var(--shadow); }.city.detail h3 { font-size:clamp(2rem,4vw,3rem); margin-top:18px; }.pill { display:inline-flex; align-self:flex-start; border:1px solid currentColor; padding:5px 7px; font:500 .61rem/1 "DM Mono",monospace; letter-spacing:.06em; }.pill.context,.pill.no-data { color:#526258; background:#e2e5df; }
.map-section,.cities { margin-top:4px; padding:58px 0; border-top:1px solid var(--ink); }.section-head { display:flex; justify-content:space-between; gap:32px; align-items:end; margin-bottom:22px; }.section-head>p { max-width:345px; margin:0; color:var(--muted); font-size:.83rem; line-height:1.55; }.map-wrap { border:1px solid var(--line); background:var(--panel); padding:14px; }.map-toolbar { display:flex; align-items:center; justify-content:space-between; gap:14px; padding-bottom:14px; }.map-toolbar button { padding:8px 10px; font-size:.75rem; }.fixture-map { position:relative; isolation:isolate; min-height:390px; overflow:hidden; background:var(--map); border:1px solid var(--map-deep); }.fixture-map::before,.fixture-map::after { content:""; position:absolute; z-index:-1; width:58%; height:64%; border:1px dashed rgba(21,33,27,.22); transform:rotate(-13deg); }.fixture-map::before { top:-22%; left:-12%; }.fixture-map::after { right:-11%; bottom:-25%; transform:rotate(25deg); }.river { position:absolute; z-index:0; width:135%; height:22%; left:-18%; top:42%; border-top:22px solid rgba(243,246,239,.62); border-radius:49%; transform:rotate(-12deg); }.district { position:absolute; z-index:1; color:rgba(21,33,27,.58); font:500 clamp(.57rem,1.3vw,.72rem)/1.5 "DM Mono",monospace; letter-spacing:.07em; }.d1 { top:22%; left:28%; }.d2 { bottom:21%; left:12%; }.d3 { top:53%; right:14%; }.map-marker { position:absolute; z-index:3; width:30px; height:30px; padding:0; border:1px solid var(--ink); border-radius:50%; background:var(--paper); color:var(--ink); font:700 .78rem/1 "DM Mono",monospace; box-shadow:0 3px 10px rgba(21,33,27,.14); }.map-marker:hover,.map-marker:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }.map-marker span { position:absolute; width:max-content; max-width:170px; left:38px; top:4px; padding:5px 7px; background:var(--ink); color:var(--paper); text-align:left; font:400 .61rem/1.35 "DM Mono",monospace; opacity:0; pointer-events:none; transform:translateY(3px); transition:opacity .15s,transform .15s; }.map-marker:hover span,.map-marker:focus-visible span { opacity:1; transform:none; }.m1 { left:39%; top:33%; }.m2 { right:24%; top:57%; }.m3 { left:21%; bottom:21%; }.demo-roads { position:absolute; inset:0; z-index:2; width:100%; height:100%; opacity:0; transition:opacity .2s; pointer-events:none; }.demo-roads path { fill:none; stroke:var(--orange); stroke-width:3; stroke-dasharray:6 10; }.demo-visible .demo-roads { opacity:.82; }.map-output { min-height:3em; margin:13px 0 0; color:var(--muted); font-size:.78rem; line-height:1.55; }.city-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; }
.lower-grid { display:grid; grid-template-columns:minmax(220px,.72fr) minmax(0,1.28fr); gap:18px; margin-top:12px; }.ad-slot { align-self:start; padding:24px; background:#e7e1d2; }.ad-slot p { margin:0 0 46px; color:var(--muted); font:500 .62rem/1.45 "DM Mono",monospace; letter-spacing:.05em; }.ad-slot strong { display:block; margin-bottom:12px; font:600 1.3rem/1.1 "Playfair Display",Georgia,serif; }.ad-slot span { font-size:.78rem; line-height:1.55; }.report { padding:30px; }.report>p:not(.eyebrow) { max-width:650px; color:var(--muted); font-size:.88rem; line-height:1.65; } form { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:24px; } label { display:grid; gap:7px; color:var(--muted); font:500 .65rem/1.4 "DM Mono",monospace; letter-spacing:.04em; } select,textarea { width:100%; border:1px solid var(--line); border-radius:0; background:#fffdf7; color:var(--ink); padding:10px; font:400 .88rem/1.45 Manrope,sans-serif; } select:focus,textarea:focus { outline:3px solid var(--lime); outline-offset:1px; border-color:var(--ink); } textarea { grid-column:1/-1; min-height:112px; resize:vertical; }.form-rule,#report-output { grid-column:1/-1; margin:0; font-size:.75rem; line-height:1.5; }.form-rule { color:var(--muted); } form button { justify-self:start; } #report-output { min-height:1.5em; color:var(--ink); font-weight:600; } footer { display:flex; justify-content:space-between; gap:18px; padding:21px max(24px,calc((100vw - 1180px)/2)); border-top:1px solid var(--ink); font:500 .64rem/1.45 "DM Mono",monospace; letter-spacing:.05em; }
body.night { --paper:var(--night); --panel:#1b2b26; --ink:var(--night-paper); --muted:#afbbb1; --line:#506056; --map:#3c4843; --map-deep:#708076; } body.night .notice { background:#573427; } body.night .ad-slot { background:#28372f; } body.night select,body.night textarea { background:#17221f; color:var(--night-paper); }
@media (max-width:980px) { .city-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }.masthead { gap:32px; } } @media (max-width:680px) { .shell { width:min(100% - 28px,1180px); padding-top:14px; }.masthead,.briefing,.lower-grid { grid-template-columns:1fr; }.masthead { gap:26px; padding:28px 0; }.notice { grid-template-columns:1fr; gap:5px; margin:18px 0 40px; }.briefing { gap:18px; padding-bottom:44px; }.briefing-label { display:grid; grid-template-columns:34px 1fr; column-gap:10px; align-items:center; }.briefing-label h2 { margin:0; }.briefing-label p { grid-column:2; margin:5px 0 0; }.map-section,.cities { padding:42px 0; }.section-head { display:block; }.section-head>p { margin-top:13px; }.map-toolbar { align-items:flex-start; flex-direction:column; }.fixture-map { min-height:330px; }.map-marker span { left:auto; right:36px; }.city-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }.city { min-height:255px; padding:16px; }.city h3 { margin-top:16px; font-size:1.05rem; }.city .meta { font-size:.56rem; }.report { padding:22px 16px; } form { grid-template-columns:1fr; } textarea,.form-rule,#report-output { grid-column:auto; } footer { align-items:flex-start; flex-direction:column; padding:18px 14px; } } @media (max-width:410px) { h1 { font-size:3.7rem; }.city-grid { grid-template-columns:1fr; }.city { min-height:215px; } } @media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }
.map-canvas { min-height:460px; border:1px solid var(--map-deep); background:#e8edf0; box-shadow:var(--shadow); }
.map-search { display:flex; align-items:center; gap:.55rem; color:var(--muted); }
.map-search input { min-height:44px; min-width:230px; border:1px solid var(--line); background:#fff; color:var(--ink); padding:.55rem .7rem; font:inherit; }
.map-toolbar button:focus-visible,.map-search input:focus-visible { outline:3px solid var(--lime); outline-offset:2px; }
@media (max-width:680px) { .map-canvas { min-height:390px; }.map-search { align-items:stretch; flex-direction:column; }.map-search input { min-width:0; width:100%; } }