@font-face{font-family:Literata;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T09-36-42-150Z/assets/literata.ttf')}@font-face{font-family:Work;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T09-36-42-150Z/assets/work-sans.ttf')}@font-face{font-family:Mono;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T09-36-42-150Z/assets/ibm-plex-mono.ttf')}@font-face{font-family:Oswald;src:url('/artifacts/city-journal--v1--s4--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T09-36-42-150Z/assets/oswald.ttf')}
:root{--paper:#f3f0e7;--ink:#202823;--muted:#6e756d;--line:#c9c9b9;--green:#285a47;--acid:#d8ef58;--culture:#b94e37;--food:#b17b24;--movement:#39768b;--people:#785c91;--places:#4e7950;--serif:Literata,Georgia,serif;--sans:Work,Arial,sans-serif;--mono:Mono,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}button,input,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{color:inherit}.masthead{height:82px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 6.1%;position:relative;z-index:2}.wordmark{display:flex;align-items:center;gap:10px;font:700 12px/1.02 var(--mono);letter-spacing:.07em}.mark{width:33px;height:33px;border:1.5px solid var(--ink);border-radius:50%;font:italic 23px var(--serif);display:grid;place-items:center;position:relative}.mark span{width:6px;height:6px;background:var(--culture);border-radius:50%;position:absolute;right:-2px;top:4px}.mast-note{font:9px/1.7 var(--mono);letter-spacing:.1em;text-align:center}.mast-note span{color:var(--muted)}.saved-jump{font:10px var(--mono);letter-spacing:.06em;display:flex;align-items:center;gap:10px}.saved-pin{font-size:15px;color:var(--culture)}.saved-count{padding:5px 7px;border:1px solid var(--line);border-radius:50%;font-size:9px}.intro{min-height:565px;padding:44px 9.7% 56px;display:grid;grid-template-columns:1.04fr .96fr;position:relative;align-items:center;column-gap:6%}.intro-copy{padding:0 0 3px 1%}.eyebrow{font:10px var(--mono);letter-spacing:.13em;margin:0 0 26px;color:#516157}.live-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:#96a92f;margin-right:9px;box-shadow:0 0 0 4px #e2e7ca}.intro h1{font:400 clamp(76px,9.2vw,132px)/.88 var(--serif);letter-spacing:-.075em;margin:0 0 34px}.intro h1 em{font-style:italic;color:var(--green);padding-left:6.5vw}.intro-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:22px;max-width:480px}.intro-bottom p{font-size:14px;line-height:1.65;color:#525a52;max-width:312px;margin:0}.scroll-cue{flex:none;font:22px var(--mono);color:var(--culture);display:flex;align-items:center;gap:8px}.scroll-cue span{font:8px var(--mono);letter-spacing:.08em;color:var(--ink);white-space:nowrap}.intro-image{margin:0;position:relative;height:387px;background:#b2b5a0;overflow:hidden}.intro-image:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(19,33,29,.34),transparent 35%);pointer-events:none}.intro-image img{width:100%;height:100%;object-fit:cover;filter:saturate(.75);display:block}.intro-image figcaption{position:absolute;z-index:1;left:20px;right:20px;bottom:17px;display:flex;justify-content:space-between;color:white;font:9px var(--mono);letter-spacing:.08em}.image-stamp{position:absolute;z-index:1;right:20px;top:20px;width:78px;height:78px;border:1px solid white;border-radius:50%;display:grid;place-content:center;text-align:center;color:white;font:10px/1.25 var(--mono);letter-spacing:.12em;transform:rotate(11deg)}.image-stamp span{font-size:17px;line-height:1}.intro-index{position:absolute;bottom:22px;left:3.2%;width:98px;display:flex;flex-direction:column;color:var(--muted);font:8px var(--mono);letter-spacing:.08em}.intro-index b{font:62px/.95 var(--serif);color:var(--green);letter-spacing:-.08em}.intro-index i{font-style:normal;font-size:20px;position:absolute;right:0;bottom:0;color:var(--culture)}
.browse{background:#e8e7da;padding:58px max(9.7%,calc((100% - 1170px)/2)) 0;position:relative;overflow:hidden}.browse:before{content:"";position:absolute;left:calc(max(9.7%,(100% - 1170px)/2) + 18px);top:211px;bottom:195px;width:2px;background:repeating-linear-gradient(to bottom,var(--green) 0 9px,transparent 9px 15px);opacity:.42}.browse-head{display:flex;justify-content:space-between;align-items:flex-end;padding-bottom:26px;border-bottom:1px solid #bfc2b2;gap:25px}.browse-head .eyebrow{margin-bottom:10px}.browse-head h2{font:400 39px/1 var(--serif);letter-spacing:-.055em;margin:0}.browse-head h2 span{font:11px var(--mono);letter-spacing:0;color:var(--muted);vertical-align:top;margin-left:5px}.route-key{display:flex;gap:15px;flex-wrap:wrap;justify-content:flex-end}.route-key span{font:9px var(--mono);display:flex;align-items:center;gap:6px;color:#535b53}.key-dot{width:8px;height:8px;border-radius:50%;background:var(--c)}.culture{--c:var(--culture)}.food{--c:var(--food)}.movement{--c:var(--movement)}.people{--c:var(--people)}.places{--c:var(--places)}.toolbar{display:flex;align-items:center;gap:10px;padding:20px 0 8px}.search-wrap,.filter-wrap{height:42px;border-bottom:1px solid #aeb4a7;display:flex;align-items:center}.search-wrap{width:min(320px,40%);gap:11px}.search-icon{font-size:24px;color:var(--green);transform:rotate(-20deg)}.search-wrap input{border:0;outline:0;background:transparent;width:100%;font:12px var(--sans);color:var(--ink)}.search-wrap input::placeholder{color:#7c8179}.filter-wrap{position:relative;margin-left:auto}.filter-wrap select{appearance:none;border:0;background:transparent;padding:0 24px 0 10px;font:10px var(--mono);color:var(--ink);height:100%;cursor:pointer}.select-arrow{position:absolute;right:5px;pointer-events:none;font-size:16px}.saved-toggle{height:38px;border:1px solid #969e8d;background:transparent;display:flex;align-items:center;gap:9px;padding:0 11px;font:9px var(--mono);letter-spacing:.04em;cursor:pointer;transition:background .2s,color .2s}.toggle-icon{font:18px var(--sans);color:var(--culture)}.toggle-state{background:#d3d5c8;padding:4px 5px;font-size:8px}.saved-toggle[aria-pressed="true"]{background:var(--green);color:white;border-color:var(--green)}.saved-toggle[aria-pressed="true"] .toggle-icon{color:var(--acid)}.saved-toggle[aria-pressed="true"] .toggle-state{background:#52705f;color:white}.story-list{position:relative}.story-row{--story:var(--places);position:relative;display:grid;grid-template-columns:38px 1.08fr .92fr 118px;gap:20px;align-items:center;min-height:164px;padding:21px 0 21px 0;border-bottom:1px solid #c7c9bd}.story-row:before{content:"";position:absolute;left:11px;top:50%;width:17px;height:17px;border:3px solid #e8e7da;border-radius:50%;background:var(--story);box-shadow:0 0 0 1px var(--story);transform:translate(-50%,-50%);z-index:1}.story-number{font:10px var(--mono);color:#777e71;text-align:center}.story-copy{align-self:center}.story-tag{font:9px var(--mono);text-transform:uppercase;letter-spacing:.11em;color:var(--story);display:block;margin-bottom:8px}.story-title{font:400 clamp(21px,2.2vw,30px)/1.1 var(--serif);letter-spacing:-.04em;margin:0 0 7px;max-width:530px}.story-title button{font:inherit;letter-spacing:inherit;text-align:left;border:0;padding:0;background:none;cursor:pointer}.story-title button:hover{color:var(--green);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:4px}.story-summary{font-size:11px;line-height:1.55;color:#687068;margin:0;max-width:450px}.story-thumb{width:100%;height:107px;object-fit:cover;filter:saturate(.66);mix-blend-mode:multiply}.story-meta{display:flex;flex-direction:column;gap:7px;align-items:flex-end;text-align:right;color:#777e71;font:8px/1.4 var(--mono);letter-spacing:.04em}.open-mark{border:1px solid #acb2a5;width:29px;height:29px;border-radius:50%;display:grid;place-items:center;color:var(--green);font:14px var(--sans);margin-top:6px;transition:background .2s,color .2s}.story-row:hover .open-mark{background:var(--green);color:white}.empty-state{text-align:center;padding:70px 15px 85px}.empty-symbol{font:32px var(--serif);color:var(--culture)}.empty-state h3{font:32px var(--serif);margin:10px 0}.empty-state p{font-size:13px;color:var(--muted)}.empty-state button{border:0;background:none;font:10px var(--mono);letter-spacing:.08em;padding:13px;cursor:pointer;color:var(--green)}.empty-state button span{color:var(--culture)}.route-footer{padding:51px 0 35px;text-align:center}.footer-line{display:flex;align-items:center;gap:13px;width:170px;margin:0 auto 17px;color:var(--culture)}.footer-line span{height:1px;background:#b8bbaa;flex:1}.footer-line i{font-style:normal}.route-footer p{font:10px var(--mono);letter-spacing:.15em;margin:0 0 9px}.route-footer small{font:8px var(--mono);color:#7f857b;letter-spacing:.1em}
.detail-backdrop{position:fixed;inset:0;background:rgba(23,32,28,.48);z-index:5;backdrop-filter:blur(2px)}.detail-panel{position:fixed;z-index:6;right:0;top:0;bottom:0;width:min(690px,100%);background:var(--paper);overflow:auto;padding:36px clamp(24px,7vw,82px) 60px;box-shadow:-12px 0 40px #17201e24;animation:slide-in .28s ease both}.detail-top{display:flex;justify-content:space-between;align-items:center;padding-bottom:20px;border-bottom:1px solid var(--line);font:9px var(--mono);letter-spacing:.1em}.detail-close{border:1px solid #aab0a2;background:transparent;width:38px;height:38px;border-radius:50%;font-size:21px;cursor:pointer}.detail-marker{margin:43px 0 14px;font:10px var(--mono);letter-spacing:.1em;color:var(--story)}.detail-panel h2{font:400 clamp(43px,7vw,72px)/1.03 var(--serif);letter-spacing:-.065em;margin:0 0 20px}.detail-deck{font-size:18px;line-height:1.55;color:#5f695f;margin:0 0 23px}.detail-byline{display:flex;justify-content:space-between;gap:15px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:13px 0;color:#646d63;font:9px var(--mono);letter-spacing:.04em}.save-item{margin:23px 0 33px;border:1px solid var(--green);background:transparent;color:var(--green);padding:12px 15px;font:10px var(--mono);letter-spacing:.07em;cursor:pointer}.save-item[aria-pressed="true"]{background:var(--green);color:white}.article-body{font:16px/1.8 var(--serif);color:#373f39}.article-body p{margin:0 0 21px}.detail-end{margin-top:42px;border-top:1px solid var(--line);padding-top:18px;font:9px var(--mono);letter-spacing:.11em;color:var(--muted)}.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}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #be563e;outline-offset:4px}@keyframes slide-in{from{transform:translateX(18px);opacity:.7}to{transform:none;opacity:1}}[hidden]{display:none!important}
@media(max-width:900px){.intro{padding-left:8%;padding-right:8%;grid-template-columns:1fr 1fr;column-gap:4%}.intro h1{font-size:clamp(72px,10vw,110px)}.intro-image{height:330px}.intro-index{display:none}.browse{padding-left:8%;padding-right:8%}.browse:before{left:calc(8% + 18px)}.story-row{grid-template-columns:38px 1fr .75fr 80px;gap:14px}.story-thumb{height:93px}.route-key{gap:9px}.story-meta{font-size:7px}}
@media(max-width:600px){.masthead{height:68px;padding:0 20px}.mast-note{font-size:7px}.mast-note span{font-size:7px}.saved-jump{font-size:0;gap:5px}.saved-pin{font-size:15px}.saved-count{font-size:9px}.intro{display:flex;flex-direction:column;align-items:stretch;padding:37px 22px 32px;gap:26px;min-height:0}.intro-copy{padding:0}.eyebrow{font-size:9px;margin-bottom:22px}.intro h1{font-size:clamp(70px,17vw,94px);margin-bottom:20px}.intro h1 em{padding-left:17vw}.intro-bottom p{font-size:13px;max-width:260px}.scroll-cue{font-size:18px;gap:5px}.scroll-cue span{font-size:7px}.intro-image{height:235px;margin:0 0 0 17px}.image-stamp{height:64px;width:64px;font-size:8px;right:13px;top:13px}.intro-image figcaption{left:13px;right:13px;font-size:7px}.browse{padding:39px 20px 0}.browse:before{left:31px;top:212px;bottom:190px}.browse-head{display:block;padding-bottom:18px}.browse-head h2{font-size:33px}.route-key{justify-content:flex-start;margin-top:17px;gap:9px 13px}.route-key span{font-size:8px}.toolbar{gap:8px;padding-top:15px;flex-wrap:wrap}.search-wrap{width:100%;height:39px;order:0}.filter-wrap{margin:0 auto 0 0;height:37px}.filter-wrap select{padding-left:0;font-size:9px}.saved-toggle{height:36px;font-size:8px;padding:0 8px;gap:6px}.story-row{grid-template-columns:23px 1fr 58px;gap:10px;min-height:147px;padding:18px 0}.story-row:before{left:11px;width:14px;height:14px}.story-number{font-size:8px}.story-title{font-size:21px;margin-bottom:6px}.story-summary{font-size:10px;line-height:1.45}.story-tag{font-size:8px;margin-bottom:6px}.story-thumb{height:77px;grid-column:3;grid-row:1;width:58px}.story-meta{grid-column:2/4;grid-row:2;flex-direction:row;justify-content:space-between;align-items:center;text-align:left;font-size:7px;padding-top:1px}.open-mark{width:25px;height:25px;margin:0}.story-row{align-items:center}.route-footer{padding:42px 0 29px}.route-footer p{font-size:8px}.detail-panel{padding:20px 23px 45px}.detail-top{padding-bottom:14px}.detail-marker{margin-top:30px}.detail-panel h2{font-size:47px}.detail-deck{font-size:16px}.article-body{font-size:16px}.detail-byline{font-size:8px}.detail-backdrop{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}