@font-face{font-family:DM Sans;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--web-design-guidelines--2026-10-12T09-16-40-571Z/assets/dm-sans.ttf') format('truetype');font-weight:100 1000;font-display:swap}
@font-face{font-family:Literata;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--web-design-guidelines--2026-10-12T09-16-40-571Z/assets/literata.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:IBM Plex Mono;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--web-design-guidelines--2026-10-12T09-16-40-571Z/assets/ibm-plex-mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f4eddd;--ink:#252b29;--muted:#68716a;--line:#d9d2c2;--green:#426d54;--orange:#d45a35;--blue:#485b98;--lilac:#9381a9;--yellow:#ecc64e;--white:#fffdf7;--mono:'IBM Plex Mono',monospace;--sans:'DM Sans',Arial,sans-serif;--serif:'Literata',Georgia,serif}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:20px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:rgba(66,109,84,.18)}button,input,select{font:inherit}button,a,select{touch-action:manipulation}a{color:inherit}.skip-link{position:absolute;left:12px;top:-60px;z-index:20;padding:12px;background:var(--ink);color:white}.skip-link:focus{top:12px}:focus-visible{outline:3px solid #dc6b36;outline-offset:4px}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.masthead{height:82px;display:flex;align-items:center;justify-content:space-between;padding:0 5.2%;border-bottom:1px solid var(--line);position:relative;z-index:1}.brand{display:flex;align-items:center;gap:11px;text-decoration:none}.brand-mark{width:39px;height:39px;border:1px solid var(--ink);border-radius:50%;display:grid;place-content:center;font-family:var(--serif);font-size:22px;line-height:1;letter-spacing:-3px;padding-right:3px}.brand-mark span{color:var(--orange)}.brand-name{font-size:10px;font-weight:800;line-height:1.15;letter-spacing:.16em}.edition,.saved-shortcut{font-family:var(--mono);font-size:10px;letter-spacing:.045em}.edition{color:var(--muted)}.edition span{color:var(--orange);padding:0 5px}.saved-shortcut{text-decoration:none;border-bottom:1px solid var(--line);padding:7px 0}.saved-shortcut span{color:var(--orange);margin-left:12px}
.intro{padding:62px 5.2% 0;display:grid;grid-template-columns:1.02fr .98fr;column-gap:4%;position:relative;overflow:hidden}.intro-copy{padding:22px 0 26px 2.7%;align-self:center}.eyebrow{font:10px var(--mono);letter-spacing:.09em;color:var(--green);margin:0 0 22px}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:8px;box-shadow:0 0 0 4px #d45a3520}.intro h1{font:500 clamp(54px,6vw,86px)/.99 var(--serif);letter-spacing:-.075em;margin:0;max-width:680px;text-wrap:balance}.intro h1 em{font-weight:400;color:var(--green)}.intro-deck{font:16px/1.6 var(--serif);max-width:420px;color:#5e625c;margin:24px 0 22px}.map-link{font:10px var(--mono);text-decoration:none;letter-spacing:.04em;display:inline-flex;align-items:center;gap:10px}.map-link-icon{width:28px;height:28px;border:1px solid var(--green);border-radius:50%;display:grid;place-items:center;color:var(--green);font-size:15px;transition:background-color .18s,color .18s}.map-link:hover .map-link-icon{background:var(--green);color:white}.route-art{position:relative;background:#e9e3d4;border-radius:48% 48% 2px 2px/47% 47% 2px 2px;min-height:382px;overflow:hidden;border:1px solid #d8d2c5}.route-art:before,.route-art:after{content:'';position:absolute;border:1px solid #d5cebf;border-radius:50%;inset:10% 13%;transform:rotate(-22deg)}.route-art:after{inset:21% 4%;transform:rotate(23deg)}.route-art svg{width:100%;height:100%;position:absolute;inset:0}.map-road{fill:none;stroke-width:7;stroke-linecap:round;stroke-linejoin:round}.road-a{stroke:var(--orange)}.road-b{stroke:var(--green)}.road-c{stroke:#6577b5}.road-d{stroke:#d3ab38}.road-e{stroke:#927ca7}.map-grid{stroke:#d2cbbb;stroke-width:2;stroke-linecap:round;fill:none}.map-stop{fill:var(--white);stroke:var(--ink);stroke-width:2}.map-stop .stop-core{fill:var(--ink);stroke:none}.map-stop text{font:9px 'IBM Plex Mono',monospace;fill:var(--ink);stroke:none;letter-spacing:.04em}.stop-one{transform:translate(179px,237px)}.stop-two{transform:translate(304px,260px)}.stop-three{transform:translate(414px,184px)}.stop-four{transform:translate(248px,188px)}.stop-five{transform:translate(580px,149px)}.stop-six{transform:translate(371px,367px)}.stop-seven{transform:translate(446px,292px)}.stop-eight{transform:translate(517px,77px)}.map-compass{transform:translate(67px,82px);fill:var(--paper);stroke:var(--line)}.map-compass text{font:12px var(--mono);fill:var(--ink);stroke:none}.map-compass path{fill:var(--orange);stroke:none}.map-caption{position:absolute;bottom:17px;left:22px;font:8px var(--mono);letter-spacing:.08em;color:#7d796f}.map-stamp{position:absolute;right:20px;bottom:17px;border:1px solid var(--orange);color:var(--orange);width:44px;height:44px;border-radius:50%;display:grid;place-content:center;text-align:center;font:17px var(--serif);line-height:.8;transform:rotate(9deg)}.map-stamp small{font:6px var(--mono);letter-spacing:.08em;margin-top:5px}.intro-bottom{grid-column:1/-1;display:flex;justify-content:space-between;padding:20px 1px 18px;border-bottom:1px solid var(--ink);font:9px var(--mono);letter-spacing:.07em;color:var(--muted);margin-top:20px}
.story-section{padding:65px 8% 32px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:25px}.section-heading .eyebrow{margin-bottom:10px}.section-heading h2{font:500 clamp(33px,4vw,52px)/1.05 var(--serif);letter-spacing:-.06em;margin:0;text-wrap:balance}.issue-date{text-align:right;font:12px/1.4 var(--mono);letter-spacing:.04em}.issue-date span{font-size:8px;color:var(--muted)}.controls{display:flex;align-items:center;gap:13px;padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);margin-bottom:20px}.search-wrap{height:43px;display:flex;align-items:center;gap:8px;background:#ebe5d8;border:1px solid transparent;padding:0 12px;flex:1;max-width:360px}.search-wrap:focus-within{border-color:var(--green)}.search-symbol{font:24px var(--serif);line-height:1;color:var(--green);transform:rotate(-20deg)}.search-wrap input{width:100%;border:0;background:transparent;outline:0;color:var(--ink);font-size:13px}.search-wrap input::placeholder{color:#77796f}.filter-wrap{height:43px;border:1px solid var(--line);display:flex;align-items:center;gap:12px;padding:0 12px;background:transparent}.filter-wrap span{font:8px var(--mono);color:var(--muted);letter-spacing:.08em}.filter-wrap select{border:0;background:var(--paper);color:var(--ink);font:11px var(--sans);min-width:128px;padding:7px 20px 7px 0}.saved-filter{height:43px;border:1px solid var(--line);background:transparent;padding:0 12px;display:flex;gap:9px;align-items:center;cursor:pointer;font-size:11px;color:var(--ink);transition:background-color .18s,border-color .18s}.saved-filter:hover,.saved-filter[aria-pressed=true]{background:#e0e8dd;border-color:var(--green)}.bookmark-icon{font-size:19px;color:var(--green)}.saved-count{font:9px var(--mono);border-left:1px solid var(--line);padding-left:9px;color:var(--muted)}.result-count{margin-left:auto;font:9px var(--mono);color:var(--muted);white-space:nowrap}
.route-list{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px 14px;padding:12px 5px 18px}.route-list:before{position:absolute;content:'';left:50%;top:0;bottom:0;width:2px;background:repeating-linear-gradient(to bottom,var(--line) 0,var(--line) 5px,transparent 5px,transparent 11px);z-index:0}.story-card{--route:var(--green);grid-column:span 3;position:relative;min-width:0;background:var(--white);border:1px solid #e0dacd;padding:20px 20px 18px;min-height:212px;display:flex;flex-direction:column;transition:transform .2s,border-color .2s,box-shadow .2s}.story-card:hover{transform:translateY(-3px);border-color:var(--route);box-shadow:0 8px 18px #3833260b}.story-card:nth-child(4n+1){--route:var(--green)}.story-card:nth-child(4n+2){--route:var(--orange)}.story-card:nth-child(4n+3){--route:var(--blue)}.story-card:nth-child(4n){--route:#987c9e}.story-card:nth-child(1){grid-column:2/span 5;min-height:260px}.story-card:nth-child(2){grid-column:8/span 4;margin-top:35px}.story-card:nth-child(3){grid-column:1/span 4;margin-top:-24px}.story-card:nth-child(4){grid-column:6/span 5;margin-top:7px}.story-card:nth-child(5){grid-column:3/span 4;margin-top:7px}.story-card:nth-child(6){grid-column:8/span 4;margin-top:24px}.story-card:nth-child(7){grid-column:1/span 5;margin-top:-14px}.story-card:nth-child(8){grid-column:7/span 5;margin-top:10px}.story-card:before{content:'';position:absolute;z-index:1;left:-7px;top:26px;width:11px;height:11px;border-radius:50%;background:var(--white);border:3px solid var(--route)}.story-card:nth-child(even):before{left:auto;right:-7px}.card-meta{display:flex;align-items:center;justify-content:space-between;font:9px var(--mono);letter-spacing:.045em;color:var(--muted);margin-bottom:18px}.category-chip{display:inline-flex;align-items:center;gap:7px;color:var(--route);text-transform:uppercase}.category-chip:before{content:'';width:7px;height:7px;border-radius:50%;background:var(--route)}.story-card h3{font:500 clamp(21px,2vw,29px)/1.12 var(--serif);letter-spacing:-.05em;margin:0 0 11px;max-width:420px;text-wrap:balance}.story-card:nth-child(1) h3{font-size:clamp(30px,3.25vw,44px);max-width:480px}.story-card .summary{font-size:12px;line-height:1.55;color:#62665f;margin:0 0 17px;max-width:390px}.card-bottom{margin-top:auto;border-top:1px solid #e9e4da;padding-top:12px;display:flex;align-items:center;justify-content:space-between;gap:10px}.card-byline{font:9px var(--mono);color:#64675e}.open-item{border:0;background:transparent;color:var(--route);cursor:pointer;padding:6px 0 6px 8px;font:10px var(--mono);white-space:nowrap}.open-item span{display:inline-block;margin-left:6px;transition:transform .18s}.open-item:hover span{transform:translate(3px,-2px)}.route-footer{border-top:1px solid var(--ink);margin-top:22px;padding-top:17px;display:flex;justify-content:space-between;font:9px var(--mono);letter-spacing:.07em}.route-footer b{color:var(--orange);margin-left:9px}.empty-state{text-align:center;padding:65px 20px 80px}.empty-state[hidden]{display:none}.empty-pin{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;border:1px solid var(--orange);color:var(--orange);font-size:23px}.empty-state h3{font:26px var(--serif);margin:16px 0 6px}.empty-state p{font-size:13px;color:var(--muted);margin:0 0 17px}.reset-button{background:transparent;border:0;color:var(--green);font:11px var(--mono);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:10px}
.brand:hover .brand-mark{background:#e5ddcb}.saved-shortcut:hover{color:var(--green);border-color:var(--green)}.filter-wrap:hover{border-color:var(--green)}.reset-button:hover{text-decoration-thickness:2px;color:var(--orange)}
.article-dialog{position:fixed;inset:0 0 0 auto;margin:0 0 0 auto;width:min(680px,100%);height:100%;max-height:none;border:0;padding:0;background:var(--paper);color:var(--ink);box-shadow:-20px 0 70px #191d1b2e;overflow-y:auto;overscroll-behavior:contain}.article-dialog::backdrop{background:#2025209c}.article-sheet{min-height:100%;display:flex;flex-direction:column}.article-topline{height:68px;border-bottom:1px solid var(--line);padding:0 38px;display:flex;align-items:center;justify-content:space-between}.article-route-label{font:9px var(--mono);letter-spacing:.08em;color:var(--green);display:flex;align-items:center;gap:9px;text-transform:uppercase}.article-route-label i{width:8px;height:8px;border-radius:50%;background:var(--green)}.close-detail{border:1px solid var(--line);background:transparent;display:flex;align-items:center;gap:9px;padding:8px 11px;cursor:pointer;font:10px var(--mono);color:var(--ink)}.close-detail:hover{background:var(--white)}.close-detail span:first-child{font-size:18px;color:var(--orange);line-height:12px}.article-content{max-width:510px;margin:0 auto;width:calc(100% - 64px);padding:58px 0 35px;flex:1}.article-kicker{font:9px var(--mono);color:var(--orange);letter-spacing:.11em;text-transform:uppercase;margin:0 0 16px}.article-content h2{font:500 clamp(36px,5vw,58px)/1.02 var(--serif);letter-spacing:-.065em;margin:0 0 19px;text-wrap:balance}.article-summary{font:18px/1.45 var(--serif);color:#66675e;border-left:2px solid var(--green);padding-left:16px;margin:0 0 22px}.article-byline{font:9px var(--mono);color:var(--muted);padding-bottom:23px;border-bottom:1px solid var(--line);letter-spacing:.045em}.article-body{font:16px/1.85 var(--serif);color:#383d38;padding-top:7px}.article-body p{margin:17px 0}.article-end{display:flex;align-items:center;gap:14px;margin-top:28px;border-top:1px solid var(--line);padding-top:21px;color:var(--green)}.article-end>span{font-size:28px}.article-end p{font:9px var(--mono);letter-spacing:.08em;margin:0}.article-end small{font:12px var(--serif);letter-spacing:0;color:var(--muted)}.article-actions{position:sticky;bottom:0;background:var(--paper);border-top:1px solid var(--line);padding:15px max(32px,calc((100% - 510px)/2));display:flex;align-items:center;gap:15px}.save-item{border:1px solid var(--green);background:var(--green);color:white;padding:11px 14px;display:flex;align-items:center;gap:9px;cursor:pointer;font:10px var(--mono);transition:background-color .18s,color .18s}.save-item:hover{background:#31523d}.save-item[aria-pressed=true]{background:transparent;color:var(--green)}.save-glyph{font-size:17px}.article-action-note{font:9px var(--mono);color:var(--muted)}
@media(max-width:800px){.masthead{padding:0 5%;height:72px}.edition{font-size:9px}.intro{padding:34px 5% 0;grid-template-columns:1fr 1fr;column-gap:2%}.intro-copy{padding-left:0}.intro h1{font-size:clamp(48px,8vw,68px)}.intro-deck{font-size:14px}.route-art{min-height:320px}.story-section{padding:48px 5% 25px}.controls{gap:8px}.result-count{display:none}.story-card:nth-child(n){grid-column:span 6;margin:0;min-height:220px}.story-card:nth-child(1){grid-column:span 7}.story-card:nth-child(2){grid-column:8/span 5;margin-top:33px}.story-card:nth-child(3){grid-column:1/span 5;margin-top:-18px}.story-card:nth-child(4){grid-column:6/span 7;margin-top:8px}.story-card:nth-child(5){grid-column:2/span 6}.story-card:nth-child(6){grid-column:8/span 5;margin-top:28px}.story-card:nth-child(7){grid-column:1/span 6;margin-top:-10px}.story-card:nth-child(8){grid-column:7/span 6;margin-top:15px}.route-list:before{left:50%}}
@media(max-width:560px){.masthead{height:65px}.brand-mark{width:34px;height:34px;font-size:19px}.brand-name{font-size:9px}.edition{font-size:8px;max-width:115px;line-height:1.45;text-align:center}.edition span{padding:0 2px}.saved-shortcut{font-size:8px}.saved-shortcut span{margin-left:3px}.intro{display:flex;flex-direction:column;padding-top:28px}.intro-copy{padding:11px 0 23px}.intro .eyebrow{font-size:9px;margin-bottom:16px}.intro h1{font-size:57px}.intro-deck{font-size:15px;margin:17px 0}.route-art{min-height:250px;border-radius:46% 46% 2px 2px/38% 38% 2px 2px}.route-art svg{width:110%;height:110%;inset:-4% -5%}.map-stop text{font-size:8px}.map-caption{left:16px;bottom:12px;font-size:7px}.map-stamp{right:14px;bottom:10px;width:37px;height:37px}.intro-bottom{font-size:7px;margin-top:15px;padding:13px 0}.story-section{padding:40px 5% 22px}.section-heading{margin-bottom:19px}.section-heading h2{font-size:37px}.section-heading .eyebrow{font-size:8px}.issue-date{font-size:10px}.issue-date span{font-size:7px}.controls{display:grid;grid-template-columns:1fr auto;gap:8px;padding:10px 0}.search-wrap{max-width:none;grid-column:1/-1;height:42px}.filter-wrap{height:39px;padding:0 9px;gap:6px}.filter-wrap select{min-width:0;width:135px;font-size:10px}.filter-wrap span{font-size:7px}.saved-filter{height:39px;padding:0 9px;gap:6px;font-size:10px}.saved-count{padding-left:6px}.route-list{display:flex;flex-direction:column;padding:5px 0 12px;gap:11px}.route-list:before{left:15px;top:0;bottom:0}.story-card:nth-child(n){margin:0 0 0 30px;min-height:unset;padding:16px 15px 13px}.story-card:nth-child(1){min-height:0}.story-card:before,.story-card:nth-child(even):before{left:-22px;right:auto;top:21px}.card-meta{font-size:8px;margin-bottom:11px}.story-card h3,.story-card:nth-child(1) h3{font-size:25px;max-width:unset;margin-bottom:8px}.story-card .summary{font-size:11px;margin-bottom:12px}.card-bottom{padding-top:9px}.route-footer{font-size:7px;letter-spacing:.04em}.article-dialog{width:100%;box-shadow:none}.article-topline{height:60px;padding:0 18px}.article-content{width:calc(100% - 42px);padding:40px 0 28px}.article-content h2{font-size:42px}.article-summary{font-size:16px}.article-body{font-size:15px;line-height:1.78}.article-actions{padding:12px 21px}.article-action-note{font-size:8px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{scroll-behavior:auto!important;transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}}