@font-face{font-family:DMSerif;src:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--web-design-guidelines--2026-10-12T05-04-38-896Z/assets/dm-serif.ttf') format('truetype');font-display:swap}
@font-face{font-family:DMSans;src:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--web-design-guidelines--2026-10-12T05-04-38-896Z/assets/dm-sans.ttf') format('truetype');font-display:swap}
:root{--paper:#f5f2eb;--paper-light:#fbf9f4;--ink:#24241f;--muted:#77756d;--rule:#d8d3c8;--accent:#a9412d;--sage:#dfe3d5;--serif:DMSerif,Georgia,serif;--sans:DMSans,Arial,sans-serif;color-scheme:light}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:30px}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);-webkit-tap-highlight-color:rgba(169,65,45,.16)}button,input,select{font:inherit}button,a,select{touch-action:manipulation}a{color:inherit;text-decoration:none}button{color:inherit}.skip-link{position:absolute;top:-60px;left:16px;padding:12px 16px;background:var(--ink);color:white;z-index:20}.skip-link:focus{top:12px}:focus-visible{outline:2px solid var(--accent);outline-offset:4px}.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}
.site-header,main,.site-footer{width:min(1240px,calc(100% - 96px));margin-inline:auto}.topline{height:36px;border-bottom:1px solid var(--rule);display:flex;align-items:center;justify-content:space-between;color:#77746b;font-size:10px;letter-spacing:.14em;text-transform:uppercase}.topline i{color:var(--accent);font-style:normal;margin:0 4px}.masthead{min-height:112px;display:flex;align-items:center;justify-content:space-between}.wordmark,.footer-brand{font-family:var(--serif);font-size:55px;letter-spacing:-.065em;line-height:1}.wordmark-dot,.footer-brand span{color:var(--accent)}.masthead-deck{font-size:12px;line-height:1.55;color:#716f67;margin-left:5%;margin-right:auto;padding-left:34px;border-left:1px solid var(--rule)}.primary-nav{display:flex;align-items:center;gap:34px;text-transform:uppercase;letter-spacing:.11em;font-size:10px}.primary-nav a{transition:color .18s ease}.primary-nav a:hover{color:var(--accent)}.nav-mark{font-size:20px;color:var(--accent)}.header-rule{border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);height:31px;display:flex;justify-content:space-between;align-items:center;text-transform:uppercase;letter-spacing:.13em;font-size:9px;color:#77746b}
.intro{padding:73px 0 67px;text-align:center;border-bottom:1px solid var(--rule)}.intro-kicker,.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-size:10px;color:var(--accent)}.kicker-mark{font-size:15px;margin-right:8px}.intro h1{font:400 clamp(53px,6vw,82px)/.99 var(--serif);letter-spacing:-.04em;margin:23px 0 18px;text-wrap:balance}.intro h1 em{color:var(--accent);font-weight:400}.intro-copy{font-size:13px;line-height:1.8;color:#6f6c64;margin:0}
.journal{padding-top:58px}.section-heading{display:flex;align-items:end;justify-content:space-between;margin-bottom:23px}.section-heading h2{font:400 38px/.98 var(--serif);letter-spacing:-.03em;margin:8px 0 0}.story-count{font-size:11px;color:var(--muted);letter-spacing:.04em;padding-bottom:4px}.tools{display:flex;align-items:center;gap:12px;padding:12px 0 17px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule)}.search-wrap{display:flex;align-items:center;gap:10px;flex:1;max-width:420px;height:42px;padding:0 13px;border:1px solid #d8d3c8;background:var(--paper-light)}.search-wrap:focus-within{border-color:var(--accent)}.search-wrap svg{width:16px;height:16px;fill:none;stroke:#79766e;stroke-width:1.5;flex:none}.search-wrap input{border:0;outline:0;background:transparent;width:100%;min-width:0;color:var(--ink);font-size:12px}.search-wrap input::placeholder{color:#8c8981}.filter-wrap{position:relative}.filter-wrap select{height:42px;min-width:154px;padding:0 36px 0 13px;border:1px solid #d8d3c8;background:var(--paper-light);color:var(--ink);font-size:12px;appearance:none;cursor:pointer}.select-arrow{position:absolute;right:13px;top:9px;pointer-events:none;font-size:17px}.saved-filter{height:42px;margin-left:auto;padding:0 13px;display:flex;align-items:center;gap:9px;background:transparent;border:1px solid #d8d3c8;font-size:11px;cursor:pointer;transition:background .18s ease,border-color .18s ease}.saved-filter svg{height:16px;width:16px;fill:none;stroke:currentColor;stroke-width:1.5}.saved-filter:hover,.saved-filter[aria-pressed=true]{background:var(--sage);border-color:#b6bca9}.saved-count{color:var(--accent);font-variant-numeric:tabular-nums}
.feature-grid{display:grid;grid-template-columns:1.45fr 1fr;gap:26px;padding:24px 0 31px;border-bottom:1px solid var(--rule)}.feature-card{min-width:0}.feature-card:first-child{display:grid;grid-template-columns:1.12fr .88fr;gap:24px;align-items:center}.feature-card:not(:first-child){border-left:1px solid var(--rule);padding-left:26px;display:flex;flex-direction:column}.feature-image{position:relative;overflow:hidden;display:block;background:#ded8cc;aspect-ratio:1.52}.feature-card:not(:first-child) .feature-image{aspect-ratio:2.1;margin-bottom:16px}.feature-image img,.story-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s ease}.feature-image:hover img,.story-image:hover img{transform:scale(1.025)}.image-note{position:absolute;bottom:9px;right:9px;background:rgba(245,242,235,.9);padding:5px 8px;color:#6d685f;text-transform:uppercase;font-size:8px;letter-spacing:.1em}.feature-copy{min-width:0}.category-label{text-transform:uppercase;font-size:9px;letter-spacing:.15em;color:var(--accent)}.feature-title{font:400 clamp(25px,3vw,39px)/1.06 var(--serif);letter-spacing:-.025em;margin:11px 0 10px;text-wrap:balance}.feature-card:not(:first-child) .feature-title{font-size:26px;max-width:400px}.feature-summary{font-size:12px;line-height:1.7;color:#706e66;margin:0 0 18px;max-width:360px}.story-meta{display:flex;align-items:center;gap:8px;color:#77746c;font-size:10px;letter-spacing:.04em}.meta-dot{color:var(--accent)}.open-story{display:inline-flex;align-items:center;gap:8px;margin-top:22px;border:0;padding:0;background:none;color:var(--ink);text-transform:uppercase;letter-spacing:.12em;font-size:9px;cursor:pointer}.open-story span{font-size:15px;color:var(--accent);transition:transform .18s ease}.open-story:hover span{transform:translate(3px,-3px)}
.story-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 24px}.story-card{padding:25px 0 28px;border-bottom:1px solid var(--rule);min-width:0}.story-image{aspect-ratio:1.64;overflow:hidden;display:block;background:#ded8cc;margin-bottom:16px}.story-card h3{font:400 24px/1.08 var(--serif);letter-spacing:-.02em;margin:9px 0 8px;text-wrap:balance}.story-card .feature-summary{margin-bottom:14px}.story-card .open-story{margin-top:16px}.story-card[hidden],.feature-card[hidden]{display:none}.empty-state{text-align:center;padding:77px 20px 88px}.empty-spark{font-size:25px;color:var(--accent)}.empty-state h3{font:400 38px var(--serif);margin:12px 0 6px}.empty-state p{font-size:13px;color:var(--muted)}.reset-button{margin-top:13px;border:0;background:none;color:var(--accent);font-size:11px;text-transform:uppercase;letter-spacing:.1em;cursor:pointer;padding:10px}.reset-button span{margin-left:8px}.about{margin-top:96px;padding:42px 0 44px;border-top:1px solid var(--ink);border-bottom:1px solid var(--rule);text-align:center}.about p{max-width:600px;margin:18px auto 14px;font:400 27px/1.28 var(--serif);text-wrap:balance}.about-signoff{font-size:11px;color:#716f67}.about-signoff i{font-family:var(--serif);font-size:15px;color:var(--accent)}.site-footer{min-height:100px;display:flex;align-items:center;justify-content:space-between;color:#77746b;font-size:10px;letter-spacing:.08em}.footer-brand{font-size:29px;color:var(--ink);letter-spacing:-.06em}.site-footer>a:last-child{text-transform:uppercase;letter-spacing:.12em}
.article-dialog{width:min(790px,calc(100% - 32px));max-width:none;max-height:min(92dvh,980px);padding:0;border:0;background:var(--paper-light);color:var(--ink);box-shadow:0 24px 100px #17171345;overscroll-behavior:contain}.article-dialog::backdrop{background:rgba(27,27,23,.62);backdrop-filter:blur(3px)}.dialog-top,.dialog-bottom{height:62px;padding:0 34px;display:flex;align-items:center;justify-content:space-between;background:var(--paper-light)}.dialog-top{border-bottom:1px solid var(--rule)}.dialog-brand{font:24px var(--serif);letter-spacing:-.06em}.dialog-brand span{color:var(--accent)}.close-detail{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;text-transform:uppercase;letter-spacing:.13em;font-size:9px}.close-detail>span:first-child{font-size:24px;line-height:1;color:var(--accent)}.article-content{padding:50px 84px 58px}.article-meta{display:flex;gap:12px;align-items:center;text-transform:uppercase;font-size:9px;letter-spacing:.15em;color:var(--muted)}.article-category{color:var(--accent)}.meta-divider{color:var(--rule)}.article-content h2{font:400 clamp(42px,6vw,68px)/.98 var(--serif);letter-spacing:-.04em;margin:18px 0 16px;text-wrap:balance}.article-summary{font-size:15px;line-height:1.7;color:#706e66;max-width:550px;margin:0}.article-byline{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0;margin:24px 0 28px;font-size:10px;color:#77746c;letter-spacing:.06em}.article-figure{margin:0 0 37px}.article-figure img{width:100%;height:auto;max-height:350px;object-fit:cover;display:block}.article-figure figcaption{font-size:9px;color:#807d75;margin-top:7px;letter-spacing:.03em}.article-body{font:400 17px/1.85 var(--serif);max-width:570px;margin:auto}.article-body p{margin:0 0 21px}.article-end{max-width:570px;margin:36px auto 24px;padding-top:16px;border-top:1px solid var(--rule);display:flex;justify-content:space-between;color:#77746c;font-size:9px;text-transform:uppercase;letter-spacing:.15em}.article-end span:last-child{color:var(--accent);font-size:15px}.save-item{display:flex;align-items:center;justify-content:center;gap:9px;margin:0 auto;padding:12px 16px;border:1px solid #cbc5b9;background:transparent;cursor:pointer;text-transform:uppercase;letter-spacing:.1em;font-size:9px;transition:background .18s ease}.save-item:hover,.save-item[aria-pressed=true]{background:var(--sage);border-color:#b6bca9}.save-item svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}.dialog-bottom{border-top:1px solid var(--rule);font-size:9px;letter-spacing:.12em;color:#77746c}.back-to-journal{border:0;background:transparent;text-transform:uppercase;letter-spacing:.1em;font-size:9px;cursor:pointer;color:var(--accent)}
@media(max-width:800px){.site-header,main,.site-footer{width:calc(100% - 48px)}.topline-note{display:none}.masthead{min-height:96px}.wordmark{font-size:47px}.masthead-deck{margin-left:3%;padding-left:18px;font-size:11px}.primary-nav{gap:18px}.primary-nav a:nth-child(2){display:none}.intro{padding:62px 0 57px}.feature-grid{grid-template-columns:1fr 1fr;gap:20px}.feature-card:first-child{grid-template-columns:1fr;gap:0}.feature-card:first-child .feature-copy{padding-top:15px}.feature-card:not(:first-child){padding-left:20px}.feature-card:not(:first-child) .feature-title{font-size:23px}.story-grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}.article-content{padding:42px 54px 50px}}
@media(max-width:560px){.site-header,main,.site-footer{width:calc(100% - 36px)}.topline{height:31px;font-size:8px}.issue{font-size:8px}.masthead{min-height:79px}.wordmark{font-size:42px}.masthead-deck{display:none}.primary-nav{gap:14px;font-size:8px}.nav-mark{font-size:18px}.header-rule{font-size:8px}.intro{padding:51px 0 45px}.intro h1{font-size:57px;margin:20px 0 14px}.intro-copy{font-size:12px;padding:0 8px}.desktop-break{display:none}.journal{padding-top:42px}.section-heading{margin-bottom:17px}.section-heading h2{font-size:34px}.story-count{font-size:10px}.tools{display:grid;grid-template-columns:1fr 1fr;gap:9px;padding:11px 0 13px}.search-wrap{grid-column:1/-1;max-width:none}.filter-wrap select{width:100%;min-width:0}.saved-filter{margin:0;justify-content:center;padding:0 7px}.saved-filter span:nth-child(2){font-size:10px}.feature-grid{grid-template-columns:1fr;gap:0;padding:18px 0 20px}.feature-card:first-child{grid-template-columns:1fr}.feature-card:first-child .feature-image{aspect-ratio:1.45}.feature-card:first-child .feature-copy{padding-top:15px}.feature-title{font-size:32px;margin:8px 0}.feature-summary{font-size:12px}.feature-card:not(:first-child){border-left:0;border-top:1px solid var(--rule);padding:20px 0 0;margin-top:20px}.feature-card:not(:first-child) .feature-image{aspect-ratio:1.8;margin-bottom:13px}.feature-card:not(:first-child) .feature-title{font-size:26px}.open-story{margin-top:15px}.story-grid{grid-template-columns:1fr 1fr;gap:0 14px}.story-card{padding:19px 0 21px}.story-image{aspect-ratio:1.1;margin-bottom:12px}.story-card h3{font-size:20px}.story-card .feature-summary{font-size:11px;line-height:1.55}.story-card .story-meta{font-size:9px;gap:6px;flex-wrap:wrap}.story-card .open-story{font-size:8px;letter-spacing:.08em}.about{margin-top:67px;padding:33px 0}.about p{font-size:23px}.site-footer{min-height:84px}.footer-brand{font-size:25px}.site-footer>span{display:none}.article-dialog{width:100%;max-width:none;max-height:95dvh;margin:auto 0 0;border-radius:12px 12px 0 0}.article-dialog[open]{animation:sheet-in .22s ease-out}.dialog-top,.dialog-bottom{height:54px;padding:0 20px}.article-content{padding:37px 23px 40px}.article-content h2{font-size:45px}.article-summary{font-size:13px}.article-figure{margin-bottom:28px}.article-figure img{max-height:250px}.article-body{font-size:16px;line-height:1.78}.dialog-bottom{font-size:8px}.close-detail{font-size:8px}}
@keyframes sheet-in{from{transform:translateY(20px);opacity:.7}to{transform:translateY(0);opacity:1}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}