@font-face{font-family:Space;src:url('/artifacts/city-journal--v1--s1--gpt-6-sol-codex--taste--2026-10-12T05-31-57-200Z/assets/space-grotesk.ttf') format('truetype');font-display:swap}
@font-face{font-family:Literata;src:url('/artifacts/city-journal--v1--s1--gpt-6-sol-codex--taste--2026-10-12T05-31-57-200Z/assets/literata.ttf') format('truetype');font-display:swap}
@font-face{font-family:Plex;src:url('/artifacts/city-journal--v1--s1--gpt-6-sol-codex--taste--2026-10-12T05-31-57-200Z/assets/ibm-plex-mono.ttf') format('truetype');font-display:swap}
:root{color-scheme:light;--bg:#f4f5f1;--paper:#e9ece5;--ink:#1b2623;--muted:#52605a;--line:#aeb8b0;--accent:#235f51;--accent-hover:#194839;--white:#fbfcf8}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:Space,Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}
button{cursor:pointer}
button:active{transform:translateY(1px)}
a{color:inherit}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
[hidden]{display:none!important}
.wrap{width:min(100% - 96px,1344px);margin-inline:auto}
.site-shell{min-height:100dvh}
.header-top{height:42px;display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);font-family:Plex,monospace;font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted)}
.masthead{display:flex;justify-content:space-between;align-items:end;padding:20px 0 22px;gap:24px}
.wordmark{text-decoration:none;font-weight:700;letter-spacing:-.09em;font-size:clamp(48px,7.1vw,112px);line-height:.86;white-space:nowrap}
.wordmark span{font-weight:400}
.wordmark i{font-style:normal;color:var(--accent)}
.masthead p{font-size:13px;line-height:1.35;white-space:nowrap;margin:0 2px 3px 0;text-align:right;font-weight:500}
.header-rule{border-bottom:3px solid var(--ink)}
.browse-head{padding:62px 0 68px;display:grid;grid-template-columns:1fr 310px;align-items:end;gap:40px}
.browse-head h1{font-family:Literata,Georgia,serif;font-size:clamp(53px,5.6vw,84px);font-weight:400;line-height:1.04;letter-spacing:-.06em;margin:0 0 18px}
.browse-head p{margin:0;color:var(--muted);font-size:17px;line-height:1.5}
.browse-head .browse-intro{font-size:15px;max-width:285px;padding-bottom:7px}
.library-toolbar{border-top:1px solid var(--ink);border-bottom:1px solid var(--line);display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;padding:17px 0 19px}
.toolbar-title{font-size:24px;font-weight:600;letter-spacing:-.05em;display:flex;align-items:baseline;gap:13px;padding-bottom:7px}
.toolbar-title #result-count{font-family:Plex,monospace;font-size:11px;color:var(--muted);letter-spacing:0;font-weight:400}
.controls{display:flex;gap:13px;align-items:end}
.control{display:grid;gap:7px}
.control label{font-family:Plex,monospace;text-transform:uppercase;font-size:10px;letter-spacing:.055em;color:var(--muted)}
.control input,.control select{height:42px;border:1px solid var(--line);border-radius:0;background:transparent;color:var(--ink);padding:0 12px;font-size:13px}
.control input::placeholder{color:#66736c;opacity:1}
.search-control input{width:215px}
.topic-control select{width:155px}
.saved-filter{height:42px;min-width:104px;border:1px solid var(--ink);border-radius:0;background:transparent;color:var(--ink);display:flex;align-items:center;justify-content:center;gap:9px;font-size:13px;font-weight:600}
.saved-filter span{font-family:Plex,monospace;font-size:11px}
.saved-filter[aria-pressed="true"]{background:var(--accent);color:var(--white);border-color:var(--accent)}
.loading-state{padding:50px 0;font-family:Literata,Georgia,serif;font-size:24px;color:var(--muted)}
.story-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:24px;row-gap:55px;padding:28px 0 96px}
.story-card{grid-column:span 4;min-width:0}
.story-card.featured{grid-column:span 12;display:grid;grid-template-columns:44% 1fr;gap:32px;align-items:stretch;padding-bottom:42px;border-bottom:1px solid var(--line);min-height:438px}
.story-card .story-image{display:block;width:100%;aspect-ratio:1.47;object-fit:cover;background:var(--paper)}
.story-card.featured .story-image{height:100%;min-height:390px;aspect-ratio:auto}
.story-card .image-wrap{overflow:hidden;background:var(--paper)}
.story-card .image-wrap img{transition:transform .35s ease}
.story-card:hover .image-wrap img{transform:scale(1.025)}
.story-card.featured .image-wrap{order:2}
.story-card.featured .story-copy{order:1;display:flex;flex-direction:column;align-items:start;padding:10px 0 4px}
.story-meta{font-family:Plex,monospace;font-size:10px;line-height:1.5;letter-spacing:.045em;text-transform:uppercase;color:var(--accent);font-weight:600;margin:0 0 14px}
.story-title{font-family:Literata,Georgia,serif;font-size:clamp(25px,2.2vw,34px);line-height:1.2;letter-spacing:-.045em;font-weight:400;margin:0 0 14px}
.featured .story-title{font-size:clamp(43px,4vw,61px);line-height:1.11;letter-spacing:-.055em;max-width:570px}
.story-summary{font-size:14px;color:var(--muted);line-height:1.55;margin:0 0 22px;max-width:43ch}
.featured .story-summary{font-size:16px;max-width:40ch}
.story-byline{font-family:Plex,monospace;font-size:10px;color:var(--muted);line-height:1.5;margin:0 0 18px}
.featured .story-byline{margin-top:auto}
.story-card:not(.featured) .story-copy{padding-top:19px}
.story-open{border:0;border-bottom:1px solid var(--accent);padding:0 0 3px;background:transparent;color:var(--accent);font-size:13px;font-weight:700;line-height:1.3;white-space:nowrap}
.story-open:hover{color:var(--accent-hover);border-color:var(--accent-hover)}
.empty-state{padding:80px 20px 100px;text-align:center}
.empty-kicker{font-family:Plex,monospace;text-transform:uppercase;font-size:11px;letter-spacing:.07em;color:var(--accent)}
.empty-state h2{font-family:Literata,Georgia,serif;font-size:clamp(34px,4vw,55px);font-weight:400;letter-spacing:-.05em;margin:12px 0}
.empty-state p{color:var(--muted);font-size:15px;line-height:1.5}
.empty-state button{margin-top:20px;background:var(--accent);color:var(--white);border:1px solid var(--accent);border-radius:0;padding:13px 21px;font-weight:600;font-size:13px}
.empty-state button:hover{background:var(--accent-hover)}
.site-footer{padding-bottom:28px}
.footer-rule{border-top:3px solid var(--ink)}
.footer-content{display:grid;grid-template-columns:1fr 1fr auto;gap:30px;align-items:start;padding-top:25px;font-size:12px;color:var(--muted)}
.footer-content strong{color:var(--ink);font-size:18px;letter-spacing:-.07em}
.footer-content p{margin:0}.footer-content span{font-family:Plex,monospace;font-size:10px}
.detail-wrap{width:min(100% - 96px,1344px);margin:auto}
.detail-nav{padding:24px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center;gap:20px}
.back-button{border:0;background:transparent;padding:8px 0;color:var(--accent);font-size:13px;font-weight:700}
.back-button:hover{text-decoration:underline}
.detail-nav span{font-family:Plex,monospace;font-size:10px;text-transform:uppercase;color:var(--muted)}
.detail-heading{max-width:1000px;margin:65px auto 42px;text-align:center}
.detail-heading .story-meta{margin-bottom:20px}
.detail-heading h1{font-family:Literata,Georgia,serif;font-size:clamp(48px,6.2vw,88px);line-height:1.08;letter-spacing:-.06em;font-weight:400;margin:0 auto 24px}
.detail-deck{font-size:clamp(18px,2vw,24px);line-height:1.45;color:var(--muted);max-width:650px;margin:0 auto 27px}
.detail-info{font-family:Plex,monospace;font-size:11px;color:var(--muted)}
.detail-image{width:100%;height:min(51vw,560px);min-height:290px;object-fit:cover;display:block}
.detail-caption{font-family:Plex,monospace;font-size:10px;color:var(--muted);margin:9px 0 0;text-align:right}
.article-layout{display:grid;grid-template-columns:minmax(120px,1fr) minmax(0,680px) minmax(120px,1fr);gap:30px;padding:60px 0 120px}
.article-aside{grid-column:1;padding-top:6px}
.aside-label{font-family:Plex,monospace;font-size:10px;color:var(--muted);text-transform:uppercase;margin:0 0 12px}
.save-button{border:1px solid var(--accent);background:transparent;color:var(--accent);border-radius:0;padding:12px 17px;font-size:13px;font-weight:700;white-space:nowrap}
.save-button[aria-pressed="true"]{background:var(--accent);color:var(--white)}
.save-button:hover{background:var(--accent-hover);color:var(--white)}
.article-body{grid-column:2;font-family:Literata,Georgia,serif;font-size:20px;line-height:1.85;letter-spacing:-.013em}
.article-body p{margin:0 0 30px}
.article-body p:first-child::first-letter{float:left;font-size:4.1em;line-height:.77;padding:12px 9px 0 0;color:var(--accent)}
.article-end{border-top:1px solid var(--line);margin-top:55px;padding-top:22px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.article-end p{font-family:Space,Arial,sans-serif;font-size:13px;line-height:1.4;color:var(--muted);margin:0}
@media(max-width:1100px){.wordmark{font-size:clamp(48px,7vw,82px)}.masthead p{display:none}.browse-head{padding:48px 0 54px}.story-card.featured{grid-template-columns:45% 1fr}.featured .story-title{font-size:clamp(38px,4vw,52px)}}
@media(max-width:767px){.wrap,.detail-wrap{width:min(100% - 36px,620px)}.header-top{height:34px;font-size:9px}.header-top span:last-child{display:none}.masthead{padding:23px 0 18px}.wordmark{font-size:clamp(39px,9.8vw,69px)}.browse-head{display:block;padding:34px 0 30px}.browse-head h1{font-size:52px;margin-bottom:11px}.browse-head p{font-size:15px}.browse-head .browse-intro{display:none}.library-toolbar{display:block;padding:15px 0}.toolbar-title{font-size:22px;margin-bottom:17px;padding:0}.controls{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}.search-control{grid-column:span 2}.search-control input,.topic-control select{width:100%}.saved-filter{width:100%}.story-list{display:grid;grid-template-columns:1fr 1fr;column-gap:16px;row-gap:38px;padding:19px 0 70px}.story-card{grid-column:span 1}.story-card.featured{grid-column:span 2;display:flex;flex-direction:column;gap:0;padding-bottom:27px;min-height:0}.story-card.featured .image-wrap{order:0}.story-card.featured .story-copy{order:1;padding-top:20px}.story-card.featured .story-image{height:auto;min-height:0;aspect-ratio:1.55}.story-card:not(.featured) .story-image{aspect-ratio:1}.story-card:not(.featured) .story-copy{padding-top:12px}.story-title{font-size:20px;line-height:1.22;margin-bottom:11px}.featured .story-title{font-size:38px;line-height:1.13}.story-summary{font-size:12px;margin-bottom:14px}.featured .story-summary{font-size:14px}.story-meta{font-size:9px;margin-bottom:10px}.story-byline{font-size:9px;margin-bottom:13px}.story-open{font-size:12px}.footer-content{grid-template-columns:1fr;gap:11px}.detail-nav{padding:15px 0}.detail-heading{margin:42px auto 31px;text-align:left}.detail-heading h1{font-size:44px;margin-bottom:19px}.detail-deck{font-size:17px;margin-bottom:20px}.detail-image{height:310px;min-height:0}.article-layout{display:flex;flex-direction:column;gap:26px;padding:34px 0 76px}.article-aside{display:flex;align-items:center;justify-content:space-between;padding:0}.aside-label{margin:0}.article-body{font-size:17px;line-height:1.8}.article-body p{margin-bottom:23px}.article-end{display:block;margin-top:37px}.article-end .back-button{margin-top:12px}}
@media(max-width:430px){.wordmark{font-size:9.5vw}.story-card:not(.featured) .story-summary{display:none}.story-card:not(.featured) .story-byline{display:none}.story-card:not(.featured) .story-meta{margin-bottom:8px}.story-card:not(.featured) .story-open{margin-top:4px}}
@media(prefers-color-scheme:dark){:root{color-scheme:dark;--bg:#17221e;--paper:#25362e;--ink:#eaf0e9;--muted:#bac8bf;--line:#5b6e62;--accent:#a6d3af;--accent-hover:#c2e3c7;--white:#17221e}.control input::placeholder{color:#bac8bf}.saved-filter[aria-pressed="true"],.save-button[aria-pressed="true"],.empty-state button{color:#17221e}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.story-card .image-wrap img{transition:none}}
.header-top,.control label,.story-meta,.story-byline,.detail-info,.detail-caption,.footer-content span{font-size:11px}
@media(max-width:767px){.story-meta,.story-byline{font-size:10px}.header-top{font-size:10px}}