@font-face{font-family:Literata;src:url('/artifacts/city-journal--v1--s2--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T08-10-15-501Z/assets/literata.ttf') format('truetype');font-weight:200 900;font-display:swap}
@font-face{font-family:WorkSans;src:url('/artifacts/city-journal--v1--s2--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T08-10-15-501Z/assets/work-sans.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:PlexMono;src:url('/artifacts/city-journal--v1--s2--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T08-10-15-501Z/assets/ibm-plex-mono.ttf') format('truetype');font-display:swap}
:root{--paper:#f4f1e8;--paper2:#ebe7dc;--ink:#22251f;--muted:#696b62;--line:#cfcec3;--red:#bd432f;--olive:#777957;--serif:Literata,Georgia,serif;--sans:WorkSans,Arial,sans-serif;--mono:PlexMono,monospace;color-scheme:light}
*{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:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--red);outline-offset:4px}.masthead{height:100px;margin:0 auto;max-width:1320px;padding:0 42px;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center;border-bottom:1px solid var(--line)}.wordmark{font-family:var(--sans);font-weight:800;letter-spacing:-.085em;font-size:30px;white-space:nowrap}.wordmark span{font-weight:400}.wordmark i{font-style:normal;color:var(--red)}.mast-meta{display:flex;flex-direction:column;gap:8px;align-items:center;font-family:var(--mono);font-size:9px;letter-spacing:.13em}.edition{display:flex;align-items:center;gap:10px;color:var(--muted)}.edition b{color:var(--ink);font-weight:500}.edition i{width:18px;height:1px;background:var(--red)}.mast-link{justify-self:end;font-family:var(--mono);font-size:10px;letter-spacing:.1em}.mast-link span,.text-link span{color:var(--red);margin-left:8px;font-size:15px}.intro{max-width:1320px;margin:0 auto;padding:58px 42px 45px;min-height:383px;display:grid;grid-template-columns:1.35fr .65fr;grid-template-rows:auto 1fr auto;column-gap:54px;position:relative}.intro-kicker,.section-kicker,.tool-label{font-family:var(--mono);font-size:10px;letter-spacing:.13em}.intro-kicker{grid-column:1/-1;color:var(--muted);display:flex;align-items:center;gap:9px}.red-dot{width:7px;height:7px;border-radius:50%;background:var(--red);display:inline-block}.intro h1{font-family:var(--serif);font-size:clamp(52px,6.2vw,84px);line-height:1.04;letter-spacing:-.065em;font-weight:400;margin:24px 0 0;max-width:760px}.intro h1 em{font-weight:400;color:var(--red)}.intro-side{align-self:center;padding:36px 0 0 5px;max-width:270px}.intro-side p{font-family:var(--serif);font-size:18px;line-height:1.55;margin:0 0 24px}.text-link{font-family:var(--mono);font-size:10px;letter-spacing:.1em;border:0;background:none;padding:0;cursor:pointer}.intro-index{grid-column:1/-1;display:flex;justify-content:space-between;align-items:end;font-family:var(--mono);font-size:9px;letter-spacing:.12em;color:var(--muted);margin-top:6px}.intro-index b{font-weight:400;color:var(--ink)}
.journal{background:var(--paper2);border-top:1px solid var(--line);padding:45px max(42px,calc((100vw - 1236px)/2)) 82px}.section-heading{display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--ink);padding:0 0 20px}.section-kicker{color:var(--muted);font-size:9px}.section-heading h2{font-family:var(--serif);font-size:35px;letter-spacing:-.055em;font-weight:400;margin:8px 0 0}.section-heading h2 span{color:var(--red)}.section-heading>p{font-family:var(--serif);font-size:14px;margin:0 0 3px;color:var(--muted)}.tools{display:flex;align-items:center;gap:24px;min-height:74px;border-bottom:1px solid var(--line)}.search-wrap{height:40px;display:flex;align-items:center;gap:9px;border-bottom:1px solid #aaa99f;min-width:245px}.search-icon{font-size:22px;color:var(--red);line-height:1}.search-wrap input{background:transparent;border:0;outline:0;font-size:13px;width:100%;color:var(--ink)}.search-wrap input::placeholder{color:#77776f}.filter-wrap{display:flex;align-items:center;gap:10px}.tool-label{color:var(--muted);font-size:9px}.filter-wrap select{background:transparent;border:0;color:var(--ink);font-size:12px;min-width:110px;padding:8px 22px 8px 0;cursor:pointer}.saved-filter{margin-left:auto;border:1px solid #aaa99f;background:transparent;color:var(--ink);padding:9px 12px;display:flex;align-items:center;gap:9px;font-size:11px;cursor:pointer;transition:background .18s,color .18s,border .18s}.saved-filter[aria-pressed=true]{background:var(--ink);color:var(--paper);border-color:var(--ink)}.bookmark-icon{font-size:16px;color:var(--red)}.saved-filter[aria-pressed=true] .bookmark-icon{color:#f2b3a3}.saved-count{font-family:var(--mono);font-size:9px;opacity:.75}.results-count{font-family:var(--mono);font-size:9px;color:var(--muted);min-width:46px;text-align:right}.story-list{display:grid;grid-template-columns:1fr 1fr;column-gap:38px}.story-card{position:relative;display:grid;grid-template-columns:124px 1fr;gap:18px;align-items:center;padding:23px 0;border-bottom:1px solid var(--line);min-width:0}.story-card.featured{grid-column:1/-1;grid-template-columns:minmax(0,1.16fr) minmax(280px,.84fr);gap:38px;padding:32px 0 37px}.story-image{display:block;width:124px;height:96px;object-fit:cover;background:#d4d0c4;filter:saturate(.78)}.featured .story-image{width:100%;height:314px;grid-row:1/4;grid-column:2;object-fit:cover}.story-copy{min-width:0}.story-meta{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:9px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:9px}.story-meta .category{color:var(--red)}.story-meta .meta-dot{width:3px;height:3px;background:#a9a79e;border-radius:100%}.story-title{font-family:var(--serif);font-size:21px;line-height:1.24;letter-spacing:-.04em;font-weight:400;margin:0 0 7px}.featured .story-title{font-size:clamp(34px,3.5vw,48px);line-height:1.13;max-width:520px;margin:11px 0 12px}.story-summary{font-size:12px;line-height:1.65;color:var(--muted);margin:0;max-width:430px}.featured .story-summary{font-family:var(--serif);font-size:16px;line-height:1.6;max-width:390px}.story-open{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;border:0;background:none;padding:0;margin-top:15px;color:var(--ink);cursor:pointer;text-align:left}.story-open span{color:var(--red);padding-left:7px;font-size:13px}.story-open:hover{color:var(--red)}.story-card:not(.featured) .story-open{margin-top:0;position:absolute;inset:0;width:100%;height:100%;opacity:0}.story-card:not(.featured) .story-copy{pointer-events:none}.story-card:not(.featured) .story-image{pointer-events:none}.story-card:not(.featured):hover .story-title{color:var(--red)}.story-card:not(.featured) .save-chip{position:absolute;z-index:1;right:0;top:27px}.save-chip{border:0;background:transparent;color:var(--red);font-size:17px;cursor:pointer;padding:5px}.save-chip[aria-pressed=true]{color:var(--red)}.featured .save-chip{position:absolute;right:0;bottom:44px}.featured .story-copy{grid-column:1;grid-row:1/4;align-self:center;padding-right:28px}.image-note{font-family:var(--mono);font-size:8px;color:var(--muted);letter-spacing:.05em;grid-column:2;align-self:start;margin-top:-28px;text-align:right}.empty-state{text-align:center;padding:80px 20px 45px}.empty-mark{font-family:var(--serif);font-size:34px;color:var(--red)}.empty-state h3{font-family:var(--serif);font-size:27px;font-weight:400;margin:5px 0}.empty-state p{color:var(--muted);font-size:13px;margin:0 0 20px}.footer{max-width:1320px;padding:32px 42px 42px;margin:auto;display:grid;grid-template-columns:1fr 1fr 1fr;align-items:center}.footer-mark{font-size:21px}.footer p{font-family:var(--serif);font-size:12px;text-align:center;color:var(--muted)}.footer>span{font-family:var(--mono);font-size:8px;letter-spacing:.1em;text-align:right;color:var(--muted)}.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.story-dialog{border:0;padding:0;background:var(--paper);color:var(--ink);width:min(760px,calc(100% - 36px));max-width:none;max-height:min(90vh,900px);box-shadow:0 18px 80px #171a1840;overflow:auto}.story-dialog::backdrop{background:#20221ed1;backdrop-filter:blur(3px)}.dialog-close{position:sticky;top:0;z-index:2;display:block;margin-left:auto;background:var(--paper);border:0;border-bottom:1px solid var(--line);padding:18px 24px;color:var(--ink);font-family:var(--mono);font-size:10px;letter-spacing:.11em;cursor:pointer}.dialog-close span{font-size:18px;color:var(--red);padding-left:8px;vertical-align:-1px}.article-content{padding:16px clamp(25px,8vw,78px) 70px}.article-content .article-category{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;color:var(--red)}.article-content h2{font-family:var(--serif);font-weight:400;font-size:clamp(37px,6vw,58px);line-height:1.11;letter-spacing:-.055em;margin:14px 0 15px}.article-deck{font-family:var(--serif);font-size:18px;line-height:1.55;color:#51534b;margin:0 0 17px}.article-byline{font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--muted);padding-bottom:22px;border-bottom:1px solid var(--line)}.article-actions{display:flex;justify-content:space-between;align-items:center;margin:17px 0 29px}.article-reading{font-family:var(--mono);font-size:9px;color:var(--muted);letter-spacing:.08em}.article-save{border:1px solid var(--line);background:transparent;padding:9px 12px;color:var(--ink);font-size:11px;cursor:pointer}.article-save[aria-pressed=true]{border-color:var(--red);color:var(--red)}.article-body{font-family:var(--serif);font-size:17px;line-height:1.82;max-width:540px;margin:0 auto}.article-body p{margin:0 0 21px}.article-end{display:block;width:28px;height:2px;background:var(--red);margin:37px auto 0}
@media(max-width:700px){.masthead{height:75px;padding:0 21px;grid-template-columns:1fr auto}.wordmark{font-size:25px}.mast-meta{align-items:flex-start;grid-column:2;grid-row:1;font-size:7px;gap:6px}.mast-meta>span:first-child{max-width:136px;line-height:1.5}.edition{font-size:8px}.mast-link{display:none}.intro{padding:39px 22px 24px;min-height:0;grid-template-columns:1fr;grid-template-rows:auto auto auto auto;gap:0}.intro-kicker{font-size:8px}.intro h1{font-size:clamp(45px,12vw,61px);line-height:1.04;margin:21px 0 0;letter-spacing:-.065em}.intro-side{padding:18px 0 0;max-width:310px}.intro-side p{font-size:16px;margin-bottom:15px}.intro-index{margin-top:31px;font-size:8px}.journal{padding:32px 21px 55px}.section-heading{align-items:start;padding-bottom:16px}.section-kicker{font-size:8px}.section-heading h2{font-size:29px;margin-top:7px}.section-heading>p{display:none}.tools{min-height:0;display:grid;grid-template-columns:1fr auto;gap:0 14px;padding:11px 0}.search-wrap{grid-column:1/-1;min-width:0;margin-bottom:9px;height:38px}.filter-wrap{gap:5px}.filter-wrap select{font-size:11px;min-width:94px}.saved-filter{margin-left:0;justify-self:end;padding:8px 8px;font-size:10px;gap:6px}.saved-filter .bookmark-icon{font-size:14px}.results-count{display:none}.story-list{grid-template-columns:1fr}.story-card{grid-template-columns:91px 1fr;gap:13px;padding:17px 0}.story-image{width:91px;height:83px}.story-card.featured{grid-column:1;grid-template-columns:1fr;gap:0;padding:20px 0 25px}.featured .story-image{grid-column:1;grid-row:1;width:100%;height:220px;margin-bottom:19px}.featured .story-copy{grid-column:1;grid-row:2;padding:0 25px 0 0}.featured .story-title{font-size:34px;line-height:1.13;margin:9px 0}.featured .story-summary{font-size:15px}.featured .save-chip{right:0;bottom:29px}.featured .image-note{grid-column:1;grid-row:1;align-self:end;margin:0 7px 6px 0;color:#fff;text-shadow:0 1px 4px #000;text-align:right;position:relative;z-index:1}.story-title{font-size:17px;margin-bottom:5px}.story-meta{font-size:8px;gap:6px;margin-bottom:6px}.story-summary{font-size:11px;line-height:1.5}.story-card:not(.featured) .save-chip{top:9px;right:-5px}.story-card:not(.featured) .story-title{padding-right:13px}.footer{padding:25px 21px 32px;grid-template-columns:1fr auto;gap:10px}.footer-mark{font-size:19px}.footer p{grid-column:1/-1;grid-row:2;text-align:left;margin:4px 0;font-size:11px}.footer>span{font-size:7px;max-width:130px;line-height:1.6}.article-content{padding:13px 25px 45px}.article-content h2{font-size:40px}.article-deck{font-size:16px}.article-body{font-size:16px;line-height:1.75}.dialog-close{padding:14px 18px}}
@media(min-width:701px) and (max-width:950px){.masthead{padding:0 26px}.intro{padding-left:26px;padding-right:26px}.journal{padding-left:26px;padding-right:26px}.story-list{column-gap:24px}.story-card{grid-template-columns:94px 1fr;gap:14px}.story-image{width:94px;height:84px}.featured .story-image{height:285px}.story-title{font-size:18px}.story-summary{font-size:11px}.footer{padding-left:26px;padding-right:26px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}
.featured .image-note{position:absolute;right:12px;bottom:47px;z-index:1;margin:0;color:#fff;text-shadow:0 1px 5px #000}
.story-card:not(.featured) .story-open{position:static;width:auto;height:auto;opacity:1;margin-top:8px}
.story-card:not(.featured) .story-copy{pointer-events:auto}
@media(max-width:700px){.featured .image-note{right:7px;bottom:auto;top:235px;margin:0;color:#fff;text-shadow:0 1px 5px #000}}
:root{--muted:#55584f;--red:#9f3325}
.search-wrap input::placeholder{color:#55584f;opacity:1}
.image-note{font-size:9px}
.saved-filter:hover,.article-save:hover{border-color:var(--red)}
.story-open:focus-visible,.saved-filter:focus-visible,.article-save:focus-visible,.dialog-close:focus-visible,.text-link:focus-visible{outline:2px solid var(--red);outline-offset:4px}