@font-face{font-family:Literata;src:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/literata.ttf') format('truetype');font-weight:200 900;font-display:swap}
@font-face{font-family:Work Sans;src:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/work-sans.ttf') format('truetype');font-weight:100 900;font-display:swap}
:root{--ink:#183b45;--deep:#102e37;--paper:#f3f4ed;--white:#fffefa;--lime:#d5ef63;--muted:#667777;--rule:#d8ded5;--serif:Literata,Georgia,serif;--sans:'Work Sans',Arial,sans-serif}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--deep);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}button,input,select{font:inherit}button{color:inherit}
:focus-visible{outline:3px solid #a3bd35;outline-offset:4px}
.masthead{height:84px;background:var(--ink);color:var(--white);display:flex;align-items:center;padding:0 max(6.1vw,24px);gap:38px}
.wordmark{display:inline-flex;align-items:center;gap:10px;font-size:21px;font-weight:650;letter-spacing:-1.2px}
.mark{width:29px;height:29px;display:grid;place-items:center;background:var(--lime);border-radius:50%;color:var(--ink);font:italic 21px var(--serif);letter-spacing:-2px}
.mast-note{font-size:13px;color:#c0d0cb;margin:0;border-left:1px solid #526d70;padding-left:26px}
.saved-link{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:13px;font-weight:550}.saved-link span{color:var(--lime);font-size:12px;min-width:19px;height:19px;border:1px solid #789093;border-radius:50%;display:grid;place-items:center}
main{max-width:1240px;margin:0 auto;padding:0 28px}
.intro{display:flex;align-items:center;justify-content:space-between;min-height:320px;padding:58px 5.3% 55px;border-bottom:1px solid var(--rule);position:relative}
.issue-line,.section-kicker{margin:0;color:#587172;font-size:11px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.sun-dot{width:8px;height:8px;border-radius:50%;background:#aac632}.line{width:33px;height:1px;background:#aebcb4}
h1{font:450 clamp(46px,6vw,76px)/1.08 var(--serif);letter-spacing:-.055em;margin:20px 0 13px;color:var(--ink)}h1 em{font-weight:450;color:#758b39}
.intro-deck{font:400 15px/1.65 var(--sans);color:#596d6b;max-width:450px;margin:0}
.intro-stamp{position:relative;width:148px;height:148px;margin-right:3%;display:grid;place-items:center;border:1px solid #b9c6aa;border-radius:50%;color:var(--ink);transform:rotate(-12deg)}.intro-stamp:before{content:'';position:absolute;inset:8px;border:1px dashed #b9c6aa;border-radius:50%}.intro-stamp span{text-align:center;font-size:11px;line-height:1.35;letter-spacing:.15em;font-weight:700}.intro-stamp i{position:absolute;top:11px;right:12px;background:var(--lime);font-style:normal;font-size:16px;border-radius:50%;width:27px;height:27px;display:grid;place-items:center}
.browse{padding:50px 5.3% 86px}.section-head{display:flex;align-items:end;justify-content:space-between;margin-bottom:24px}.section-kicker{font-size:10px;color:#789090}.section-head h2{font:450 38px/1.1 var(--serif);letter-spacing:-.045em;color:var(--ink);margin:6px 0 0}.result-count{font-size:12px;color:var(--muted);margin:0 0 4px}
.tools{display:flex;align-items:center;gap:10px;padding-bottom:23px;border-bottom:1px solid var(--rule);margin-bottom:25px}.search-wrap,.filter-wrap{height:44px;background:var(--white);border:1px solid #d9dfd8;display:flex;align-items:center}.search-wrap{width:min(310px,38vw);padding:0 13px;gap:9px}.search-wrap svg{width:17px;stroke:#6c8280;fill:none;stroke-width:1.8;flex:none}.search-wrap input{border:0;background:transparent;outline:none;min-width:0;width:100%;font-size:13px;color:var(--deep)}.search-wrap input::placeholder{color:#83928d}.filter-wrap select{height:100%;width:158px;padding:0 34px 0 13px;border:0;background-color:transparent;color:var(--deep);font-size:13px;cursor:pointer}.saved-toggle{height:44px;padding:0 13px;display:flex;align-items:center;gap:9px;background:transparent;border:1px solid #c8d2ca;font-size:13px;cursor:pointer;margin-left:auto}.saved-toggle svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.6}.toggle-indicator{height:16px;width:28px;background:#d8ded5;border-radius:10px;position:relative;transition:background .18s}.toggle-indicator:after{content:'';position:absolute;width:10px;height:10px;left:3px;top:3px;background:white;border-radius:50%;transition:transform .18s}.saved-toggle[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:white}.saved-toggle[aria-pressed="true"] .toggle-indicator{background:var(--lime)}.saved-toggle[aria-pressed="true"] .toggle-indicator:after{transform:translateX(12px);background:var(--ink)}
.story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}.story-card{min-height:178px;padding:24px 0 23px;border-bottom:1px solid var(--rule);display:grid;grid-template-columns:1fr 82px;gap:20px;align-items:start}.story-card:first-child{grid-column:1/-1;min-height:235px;padding:0 0 28px;margin-bottom:0;display:grid;grid-template-columns:1.05fr .95fr;gap:42px;align-items:stretch}.story-card:first-child .story-image{display:block;grid-column:2;grid-row:1;background-image:linear-gradient(0deg,rgba(16,46,55,.2),transparent 60%),url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/books.jpg');background-size:cover;background-position:center 45%;min-height:205px;position:relative}.story-card:first-child .story-copy{grid-column:1;grid-row:1;align-self:center;padding:10px 0}.story-card:first-child .story-title{font-size:32px;line-height:1.2;max-width:440px}.story-card:first-child .story-summary{font-size:14px;max-width:420px}.story-card:first-child .story-meta{margin-top:20px}.story-copy{min-width:0}.category{display:inline-flex;align-items:center;gap:7px;color:#59726f;font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:650}.category:before{content:'';width:6px;height:6px;border-radius:50%;background:#9db635}.story-title{font:450 21px/1.28 var(--serif);letter-spacing:-.025em;color:var(--ink);margin:10px 0 8px}.story-title button{font:inherit;text-align:left;line-height:inherit;background:transparent;border:0;padding:0;cursor:pointer}.story-title button:hover{color:#667f32}.story-summary{font-size:12px;line-height:1.6;color:#647673;margin:0;max-width:440px}.story-meta{display:flex;gap:12px;align-items:center;font-size:11px;color:#758681;margin-top:14px}.story-meta .author{color:#3e5a5b;font-weight:550}.story-image{width:82px;height:100px;background-size:cover;background-position:center;border-radius:1px;filter:saturate(.73)}.story-card:not(:first-child) .story-image{background-image:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/city-street.jpg')}.story-card[data-category="Food"] .story-image{background-image:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/market.jpg')}.story-card[data-category="Culture"] .story-image{background-image:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/concert.jpg')}.story-card[data-category="Movement"] .story-image{background-image:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/city-buildings.jpg')}.story-card[data-category="People"] .story-image{background-image:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/cafe.jpg')}.story-card[data-category="Places"] .story-image{background-image:url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/park.jpg')}.story-card:first-child[data-category] .story-image{background-image:linear-gradient(0deg,rgba(16,46,55,.15),transparent 60%),url('/artifacts/city-journal--v1--s1--gpt-6-luna-codex--frontend-design--2026-10-12T04-50-37-335Z/assets/books.jpg')}
.empty-state{text-align:center;padding:66px 20px 76px}.empty-spark{font-size:27px;color:#83993c}.empty-state h3{font:450 28px var(--serif);margin:10px 0 6px;color:var(--ink)}.empty-state p{font-size:13px;color:#667777;margin:0 auto 20px}.empty-state button{background:var(--ink);color:#fff;border:0;padding:12px 17px;font-size:12px;cursor:pointer}
footer{background:var(--ink);color:#d3e0d9;min-height:100px;padding:25px max(calc((100vw - 1120px)/2),28px);display:flex;align-items:center;gap:30px}footer .wordmark{font-size:18px;color:white}footer .mark{width:25px;height:25px;font-size:18px}footer p{font:italic 15px var(--serif);margin:0}footer>span{margin-left:auto;font-size:11px;color:#a6bab3}
.story-dialog{width:min(720px,calc(100% - 28px));max-width:none;max-height:min(90vh,900px);padding:0;border:0;background:var(--white);color:var(--deep);box-shadow:0 20px 90px #081f2866}.story-dialog::backdrop{background:rgba(10,35,42,.67);backdrop-filter:blur(3px)}.detail{min-height:500px}.detail-top{height:68px;padding:0 38px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--rule)}.detail-brand{display:flex;gap:9px;align-items:center;font-weight:650;font-size:15px;letter-spacing:-.5px}.detail-brand .mark{width:24px;height:24px;font-size:17px}.close-detail{height:36px;width:36px;border:1px solid #d5ddd6;background:transparent;border-radius:50%;font-size:25px;line-height:1;cursor:pointer;color:#38595a}.detail-content{padding:45px clamp(25px,8vw,75px) 64px}.detail-content .category{margin-bottom:14px}.detail-content h2{font:450 clamp(34px,5vw,52px)/1.12 var(--serif);letter-spacing:-.05em;color:var(--ink);margin:0 0 17px}.detail-meta{color:#71827d;font-size:12px;display:flex;gap:10px;align-items:center;margin-bottom:29px}.detail-summary{font:italic 19px/1.55 var(--serif);color:#4e6868;border-left:3px solid var(--lime);padding-left:17px;margin:0 0 28px}.detail-body{font:400 16px/1.85 var(--serif);color:#314e4d}.detail-body p{margin:0 0 19px}.save-item{margin-top:14px;display:inline-flex;align-items:center;gap:9px;border:1px solid #9aada3;background:transparent;padding:12px 15px;font-size:13px;cursor:pointer}.save-item svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.7}.save-item[aria-pressed="true"]{background:var(--lime);border-color:var(--lime);color:var(--deep)}.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}
@media(max-width:700px){.masthead{height:70px;padding:0 20px;gap:13px}.wordmark{font-size:19px}.mast-note{font-size:11px;padding-left:13px}.saved-link{font-size:0;gap:0}.saved-link span{font-size:11px}main{padding:0 20px}.intro{min-height:294px;padding:47px 4px 42px}.intro-stamp{width:88px;height:88px;margin:0 3px 0 12px;flex:none}.intro-stamp:before{inset:5px}.intro-stamp span{font-size:8px}.intro-stamp i{width:21px;height:21px;font-size:12px;top:4px;right:4px}.issue-line{font-size:9px;gap:7px}.line{width:17px}h1{font-size:clamp(40px,10vw,57px);margin:19px 0 12px}.intro-deck{font-size:13px;max-width:350px}.browse{padding:38px 3px 63px}.section-head{margin-bottom:18px}.section-head h2{font-size:34px}.section-kicker{font-size:9px}.result-count{font-size:10px}.tools{display:grid;grid-template-columns:1fr auto;gap:8px;padding-bottom:15px;margin-bottom:17px}.search-wrap{width:100%;grid-column:1/-1}.filter-wrap{height:42px}.filter-wrap select{width:100%;min-width:130px}.saved-toggle{height:42px;margin-left:0;padding:0 10px;font-size:11px}.story-grid{grid-template-columns:1fr;column-gap:0}.story-card{min-height:152px;padding:20px 0;grid-template-columns:1fr 76px;gap:15px}.story-card:first-child{grid-column:auto;min-height:0;padding:0 0 22px;margin-bottom:0;grid-template-columns:1fr;gap:0}.story-card:first-child .story-image{grid-column:1;grid-row:1;min-height:168px;height:168px;margin-bottom:17px}.story-card:first-child .story-copy{grid-column:1;grid-row:2;padding:0}.story-card:first-child .story-title{font-size:29px}.story-card:first-child .story-summary{font-size:13px}.story-title{font-size:19px;margin:8px 0 6px}.story-summary{font-size:11px}.story-meta{font-size:10px;gap:8px;margin-top:11px}.story-image{width:76px;height:88px}footer{padding:22px 20px;min-height:86px;gap:12px}footer p{font-size:13px}footer>span{font-size:9px;text-align:right;max-width:100px}.detail-top{height:58px;padding:0 19px}.detail-content{padding:34px 23px 44px}.detail-content h2{font-size:36px}.detail-summary{font-size:17px}.detail-body{font-size:15px}}
@media(max-width:380px){.mast-note{display:none}.intro-stamp{width:74px;height:74px}.issue-line{font-size:8px}.story-card:first-child .story-title{font-size:27px}footer p{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
.story-grid>.story-card:first-child .story-image:after{content:'Illustrative photograph';position:absolute;bottom:10px;right:11px;background:#102e37d9;color:white;padding:5px 8px;font:500 9px var(--sans);letter-spacing:.03em}