@font-face{font-family:Literata;src:url('/artifacts/city-journal--v1--s3-alternative-direction--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T14-07-15-690Z/assets/literata.ttf') format('truetype');font-weight:100 900;font-display:swap}
@font-face{font-family:Oswald;src:url('/artifacts/city-journal--v1--s3-alternative-direction--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T14-07-15-690Z/assets/oswald.ttf') format('truetype');font-weight:200 700;font-display:swap}
@font-face{font-family:Plex;src:url('/artifacts/city-journal--v1--s3-alternative-direction--gpt-6-luna-codex--design-distinctive-websites--2026-10-12T14-07-15-690Z/assets/ibm-plex-mono.ttf') format('truetype');font-weight:400;font-display:swap}
:root{--paper:#f4f3ed;--ink:#192b4a;--blue:#244fac;--pale:#e3eafa;--line:#ccd0d2;--muted:#657083;--lime:#d8f268;--serif:Literata,Georgia,serif;--sans:Arial,sans-serif;--mono:Plex,monospace}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px}button,input,select{font:inherit}button,a,select{ -webkit-tap-highlight-color:transparent}button{color:inherit}.masthead{height:82px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);max-width:1600px;margin:auto}.wordmark{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);font-family:var(--mono);font-size:14px;letter-spacing:.06em;font-weight:bold}.mark{width:35px;height:35px;border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center;font-family:var(--serif);font-size:25px;font-weight:400;line-height:1}.mark span,.footer-mark span{color:var(--lime)}.wordmark-sub{font-size:9px;display:block;letter-spacing:.19em;margin-top:3px}.masthead-note{font-family:var(--serif);font-style:italic;color:#515d6e;font-size:15px}.masthead-note span{font-style:normal;color:var(--blue);padding-left:5px}.issue-link{font:10px var(--mono);letter-spacing:.07em;text-decoration:none;color:var(--ink)}.issue-link span{color:var(--blue);font-size:15px;margin-left:8px}.intro{max-width:1440px;margin:auto;padding:59px 8.2% 52px;position:relative}.intro-kicker,.eyebrow,.category-label,.feature-topline,.feature-byline,.feature-index,.image-note,.story-count,.story-meta,.story-number,.filter-wrap select,.saved-toggle,.footer>span,.detail-header,.detail-meta,.detail-byline,.save-item,.detail-end{font-family:var(--mono);font-size:10px;letter-spacing:.075em}.intro-kicker{display:flex;align-items:center;gap:10px;color:#44546c}.live-dot{width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 4px #244fac1a}.kicker-line{height:1px;width:35px;background:var(--blue);margin-left:4px}.intro h1{font:400 clamp(64px,8vw,116px)/.91 var(--serif);letter-spacing:-.065em;margin:31px 0 25px;max-width:1000px;color:var(--ink)}.intro h1 em,.feature-copy h2 em,.section-heading h2 em{font-weight:400;color:var(--blue)}.intro-bottom{display:flex;align-items:end;justify-content:space-between;max-width:790px}.intro-bottom p{max-width:355px;margin:0;color:#515d6e;font-size:15px;line-height:1.6}.read-index{color:var(--blue);text-decoration:none;font:11px var(--mono);padding:0 4px 6px 0;border-bottom:1px solid var(--blue)}.read-index span{padding-left:18px}.intro-stamp{position:absolute;right:10%;bottom:45px;border:1px solid #244fac80;width:92px;height:92px;border-radius:50%;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:var(--blue);font:9px/1.45 var(--mono);letter-spacing:.08em;transform:rotate(11deg)}.intro-stamp span{font-size:18px;color:var(--blue)}.featured{background:var(--blue);color:white;min-height:432px;display:grid;grid-template-columns:1.06fr .94fr;position:relative;overflow:hidden}.feature-image{position:relative;min-height:432px;overflow:hidden}.feature-image::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 68%,var(--blue) 100%)}.feature-image img{width:100%;height:100%;position:absolute;inset:0;object-fit:cover;filter:saturate(.65);mix-blend-mode:screen;opacity:.82}.image-note{position:absolute;bottom:17px;left:8.5%;z-index:1;color:white;text-shadow:0 1px 5px #172b4b}.feature-copy{padding:42px clamp(28px,5vw,76px) 42px 20px;align-self:center;max-width:610px;position:relative;z-index:1}.feature-topline{display:flex;align-items:center;justify-content:space-between;color:#dce6fa}.asterisk{font-size:22px;color:var(--lime)}.category-label{margin:34px 0 11px;color:var(--lime)}.feature-copy h2{font:400 clamp(33px,3.65vw,53px)/1.08 var(--serif);letter-spacing:-.045em;margin:0;max-width:520px}.feature-copy h2 em{color:var(--lime)}.feature-summary{font-size:14px;line-height:1.6;color:#e0e8f5;max-width:380px;margin:16px 0 20px}.feature-open{border:0;background:var(--lime);color:var(--ink);padding:13px 16px;cursor:pointer;font:11px var(--mono);letter-spacing:.025em}.feature-open span{padding-left:32px;font-size:15px}.feature-open:hover{background:#e8ff9c}.feature-byline{margin-top:20px;color:#d4def0;font-size:9px}.feature-byline i{color:var(--lime);font-style:normal;padding:0 5px}.feature-index{position:absolute;right:5%;bottom:16px;color:#e3eafa99}.story-section{max-width:1440px;margin:auto;padding:67px 8.2% 85px}.section-heading{display:flex;justify-content:space-between;align-items:end;padding-bottom:22px}.eyebrow{margin:0 0 13px;color:var(--blue)}.section-heading h2{font:400 clamp(40px,5vw,64px)/1 var(--serif);letter-spacing:-.055em;margin:0}.story-count{color:var(--muted);padding-bottom:8px}.story-count b{color:var(--blue);font-size:15px;margin-left:8px}.controls{display:flex;gap:11px;align-items:center;padding:16px 0 17px;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}.search-wrap{height:42px;display:flex;align-items:center;gap:9px;border:1px solid #bfc4c8;padding:0 12px;flex:1;max-width:400px;background:#f9f8f3}.search-icon{font-size:22px;color:var(--blue);transform:rotate(-15deg)}.search-wrap input{width:100%;border:0;outline:0;background:transparent;font-size:13px;color:var(--ink)}.search-wrap input::placeholder{color:#727b87}.filter-wrap select{height:42px;padding:0 31px 0 13px;border:1px solid #bfc4c8;border-radius:0;background:#f9f8f3;color:var(--ink);cursor:pointer;letter-spacing:0}.saved-toggle{height:42px;padding:0 15px;background:transparent;border:1px solid #bfc4c8;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--ink)}.saved-toggle[aria-pressed=true]{background:var(--ink);border-color:var(--ink);color:white}.bookmark-icon{font-size:18px;line-height:.6}.saved-count{font-size:9px;border-radius:20px;background:var(--pale);color:var(--blue);padding:3px 6px}.saved-toggle[aria-pressed=true] .saved-count{background:var(--lime);color:var(--ink)}.story-list{display:grid;grid-template-columns:1fr 1fr;column-gap:54px}.story-row{min-height:153px;border-bottom:1px solid var(--line);display:grid;grid-template-columns:38px 1fr;gap:9px;padding:23px 0 20px}.story-number{color:var(--blue);padding-top:4px}.story-main{min-width:0}.story-meta{display:flex;align-items:center;gap:9px;color:#627087;font-size:9px;margin-bottom:10px}.topic-pill{color:var(--blue)}.story-title-button{border:0;padding:0;background:none;text-align:left;cursor:pointer;font:400 22px/1.18 var(--serif);letter-spacing:-.025em;color:var(--ink)}.story-title-button:hover{color:var(--blue)}.story-summary{color:#5e6776;font-size:12px;line-height:1.5;margin:9px 0 0;max-width:410px}.row-arrow{float:right;margin:0 4px 0 12px;color:var(--blue);font-size:17px}.empty-state{text-align:center;padding:58px 20px}.empty-mark{color:var(--blue);font-size:28px}.empty-state h3{font:400 30px var(--serif);margin:8px}.empty-state p{color:var(--muted);font-size:14px}.empty-state button{margin-top:8px;padding:11px 15px;border:1px solid var(--blue);background:var(--blue);color:white;font:11px var(--mono);cursor:pointer}.footer{min-height:100px;border-top:1px solid var(--line);padding:20px 8.2%;display:flex;align-items:center;gap:16px;max-width:1440px;margin:auto}.footer-mark{width:31px;height:31px;border-radius:50%;background:var(--blue);color:white;display:grid;place-items:center;text-decoration:none;font:20px var(--serif)}.footer p{font:italic 16px var(--serif);color:#596576}.footer>span{margin-left:auto;color:#667082;font-size:9px}.story-dialog{padding:0;border:0;width:min(740px,calc(100% - 28px));max-width:none;max-height:min(92vh,980px);background:var(--paper);color:var(--ink);box-shadow:0 16px 80px #111d3150}.story-dialog::backdrop{background:#142039b8;backdrop-filter:blur(3px)}.detail-content{padding:30px clamp(24px,8vw,82px) 45px}.detail-header{display:flex;justify-content:space-between;align-items:center;padding-bottom:22px;border-bottom:1px solid var(--line)}.detail-wordmark{text-decoration:none;color:var(--ink);font-weight:bold}.detail-wordmark span{font-weight:400;color:var(--blue)}.close-detail{border:1px solid var(--line);background:transparent;padding:9px 12px;cursor:pointer;font:10px var(--mono)}.close-detail span{font:19px var(--sans);padding-left:12px;vertical-align:-1px}.detail-meta{margin-top:40px;display:flex;justify-content:space-between;color:var(--blue)}.detail-title{font:400 clamp(38px,7vw,62px)/1.04 var(--serif);letter-spacing:-.05em;margin:18px 0 15px}.detail-deck{font:italic 18px/1.5 var(--serif);color:#566276;margin:0;max-width:520px}.detail-byline{color:#697486;margin:21px 0 28px}.detail-body{font:17px/1.8 var(--serif);max-width:540px}.detail-body p{margin:0 0 19px}.save-item{background:transparent;border:1px solid var(--blue);color:var(--blue);padding:13px 17px;margin-top:20px;cursor:pointer}.save-item:hover,.save-item[aria-pressed=true]{background:var(--blue);color:white}.detail-end{color:var(--blue);display:flex;align-items:center;justify-content:center;gap:13px;margin-top:37px}.detail-end span{font-size:9px;color:#6c7788}.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}:focus-visible{outline:3px solid #edaa29;outline-offset:3px}[hidden]{display:none!important}
@media(max-width:760px){.masthead{height:68px;padding:0 20px}.wordmark{font-size:12px;gap:9px}.mark{width:31px;height:31px}.masthead-note{display:none}.issue-link{font-size:9px}.intro{padding:38px 23px 35px}.intro-kicker{font-size:8px;gap:8px}.kicker-line{width:20px}.intro h1{font-size:clamp(55px,15vw,74px);line-height:.97;margin:27px 0 17px}.intro-bottom{align-items:start;gap:24px}.intro-bottom p{font-size:13px;max-width:245px}.read-index{font-size:9px;white-space:nowrap;padding-top:3px}.read-index span{padding-left:5px}.intro-stamp{right:20px;bottom:18px;width:64px;height:64px;font-size:7px}.intro-stamp span{font-size:14px}.intro-bottom p{padding-bottom:20px}.featured{display:flex;flex-direction:column-reverse;min-height:0}.feature-copy{padding:29px 23px 26px}.feature-topline{font-size:9px}.category-label{margin:23px 0 8px;font-size:9px}.feature-copy h2{font-size:37px;line-height:1.08}.feature-summary{font-size:13px;margin:12px 0 16px;max-width:340px}.feature-byline{margin-top:15px}.feature-image{min-height:210px;height:210px}.feature-image::after{background:linear-gradient(0deg,#244fac55,transparent 55%)}.image-note{left:23px;bottom:12px;font-size:8px}.feature-index{display:none}.story-section{padding:44px 22px 58px}.section-heading{padding-bottom:16px}.eyebrow{font-size:9px;margin-bottom:10px}.section-heading h2{font-size:43px}.story-count{font-size:8px;padding-bottom:5px}.story-count b{margin-left:3px}.controls{display:grid;grid-template-columns:1fr auto;gap:9px;padding:12px 0}.search-wrap{grid-column:1/-1;max-width:none;height:42px}.filter-wrap select{height:40px;max-width:100%;font-size:9px}.saved-toggle{height:40px;padding:0 11px;font-size:9px;justify-content:center}.story-list{grid-template-columns:1fr;column-gap:0}.story-row{min-height:0;padding:20px 0 18px;grid-template-columns:30px 1fr;gap:5px}.story-number{font-size:9px}.story-meta{font-size:8px;margin-bottom:8px}.story-title-button{font-size:21px;line-height:1.2}.story-summary{font-size:12px;margin-top:7px}.footer{padding:17px 22px;gap:10px;min-height:82px}.footer-mark{width:28px;height:28px}.footer p{font-size:13px;margin-right:auto}.footer>span{font-size:7px;text-align:right;max-width:94px}.detail-content{padding:21px 23px 33px}.detail-meta{margin-top:30px;font-size:9px}.detail-title{font-size:clamp(37px,10vw,49px);margin-top:17px}.detail-deck{font-size:16px}.detail-body{font-size:16px;line-height:1.75}.story-dialog{max-height:94vh}.detail-header{font-size:9px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}