/* helloCITY · city landing (one page per city with every story) */
.city-page{background:var(--paper)}
.city-page main{padding:0 clamp(1rem,4vw,3rem)}
.c-kicker{margin:0;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--red)}

/* hero */
.c-hero{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(1.5rem,4vw,4rem);align-items:center;padding:clamp(2rem,5vw,4.5rem) clamp(1rem,4vw,3rem) clamp(2rem,4vw,3.5rem);background:linear-gradient(180deg,var(--cream),var(--paper));border-bottom:1px solid var(--line);overflow:hidden}
.c-hero h1{margin:.3rem 0 .4rem;font:800 clamp(5.2rem,13vw,11.5rem)/.8 var(--display);color:var(--navy);letter-spacing:-.02em}
.c-hero h1 span{color:var(--red)}
.c-tag{margin:0 0 1.6rem;font:500 clamp(1.05rem,1.6vw,1.3rem)/1.4 var(--sans);color:var(--navy);max-width:28rem}
.c-search{display:flex;align-items:center;max-width:34rem;background:#fff;border:2px solid var(--navy);border-radius:999px;padding:.3rem .3rem .3rem 1.2rem;box-shadow:6px 6px 0 var(--red)}
.c-search input{flex:1;min-width:0;border:0;background:transparent;font:500 1.05rem var(--sans);color:var(--ink);padding:.65rem 0}
.c-search input:focus{outline:0}
.c-search:focus-within{box-shadow:6px 6px 0 var(--navy)}
.c-search button{flex:none;width:46px;height:46px;border:0;border-radius:50%;background:var(--red);color:#fff;font-size:1.35rem;cursor:pointer}
.c-try{margin:1rem 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:.4rem;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.06em;color:rgba(28,43,79,.6)}
.c-try button{border:1px solid var(--line);background:transparent;border-radius:999px;padding:.3rem .7rem;font:inherit;color:var(--navy);cursor:pointer}
.c-try button:hover{border-color:var(--navy)}
.c-collage{position:relative;height:clamp(300px,34vw,440px)}
.c-collage img{position:absolute;width:62%;aspect-ratio:4/3;object-fit:cover;border:8px solid #fff;box-shadow:0 18px 40px rgba(16,27,53,.18)}
.c-collage img:nth-child(1){top:4%;left:2%;transform:rotate(-5deg);z-index:2}
.c-collage img:nth-child(2){top:0;right:0;transform:rotate(4deg);z-index:1}
.c-collage img:nth-child(3){bottom:0;left:24%;transform:rotate(-1.5deg);z-index:3}
.c-stamp{position:absolute;z-index:4;right:4%;bottom:10%;display:grid;place-items:center;align-content:center;width:110px;height:110px;border-radius:50%;background:var(--red);color:#fff;font:800 2.6rem/1 var(--display);transform:rotate(10deg);box-shadow:0 0 0 6px var(--paper),0 0 0 8px var(--red)}
.c-stamp small{font:500 .58rem var(--mono);text-transform:uppercase;letter-spacing:.12em}

/* section heads */
.c-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1.2rem;margin:clamp(2.2rem,5vw,3.5rem) 0 1.2rem}
.c-head h2{margin:0;font:800 clamp(2rem,4vw,3rem)/.95 var(--display);text-transform:uppercase;color:var(--navy)}
.c-head p{margin:0;font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(28,43,79,.6)}
.c-head-row{justify-content:space-between}
.c-sort{font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(28,43,79,.6)}
.c-sort select{margin-left:.4rem;border:1px solid var(--navy);border-radius:999px;background:#fff;padding:.4rem .8rem;font:500 .7rem var(--mono);color:var(--navy);text-transform:uppercase;cursor:pointer}

/* chips */
.c-chips{display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 .6rem}
.chip{display:inline-flex;align-items:center;gap:.4rem;border:1px solid var(--navy);border-radius:999px;background:transparent;padding:.5rem .9rem;font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.04em;color:var(--navy);cursor:pointer;white-space:nowrap}
.chip i{font-style:normal;display:grid;place-items:center;min-width:1.3rem;height:1.3rem;border-radius:999px;background:rgba(28,43,79,.1);font-size:.6rem}
.chip:hover{background:rgba(28,43,79,.06)}
.chip.is-on{background:var(--navy);color:#fff}
.chip.is-on i{background:var(--red);color:#fff}
.c-count{margin:.4rem 0 1rem;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:rgba(28,43,79,.55)}

/* cards */
.c-grid,.c-picks-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.9rem,2vw,1.4rem)}
.c-card{position:relative;background:#fff;border:1px solid rgba(28,43,79,.22);transition:transform .2s,box-shadow .2s,border-color .2s}
.c-card[hidden]{display:none}
.c-card:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--red);border-color:var(--navy)}
.c-card a{display:flex;flex-direction:column;height:100%;text-decoration:none;color:inherit}
.c-img{display:block;overflow:hidden;background:var(--cream)}
.c-img img{width:100%;aspect-ratio:4/3;object-fit:cover;transition:transform .5s}
.c-card:hover .c-img img{transform:scale(1.04)}
.c-body{display:flex;flex-direction:column;flex:1;padding:1rem 1.1rem 1.15rem}
.c-meta{font:500 .62rem var(--mono);text-transform:uppercase;letter-spacing:.1em;color:rgba(28,43,79,.6)}
.c-meta b{font-weight:500;color:var(--red)}
.c-title{margin:.45rem 0 .5rem;font:800 1.7rem/.98 var(--display);text-transform:uppercase;color:var(--navy)}
.c-title em{display:block;margin-top:.35rem;font:500 .92rem/1.35 var(--sans);font-style:normal;text-transform:none;color:var(--navy)}
.c-desc{font:400 .9rem/1.5 var(--sans);color:rgba(16,27,53,.78)}
.c-go{margin-top:auto;padding-top:.9rem;font:500 .66rem var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--red)}
.c-save{position:absolute;top:.7rem;right:.7rem;width:38px;height:38px;border:0;border-radius:50%;background:var(--red);color:#fff;font:700 1.2rem/1 var(--sans);cursor:pointer;box-shadow:0 4px 12px rgba(16,27,53,.2)}
.c-save[aria-pressed="true"]{background:var(--navy)}
.c-pick .c-title{font-size:2rem}
.c-picks-grid .c-pick:first-child{grid-column:span 1}
.c-empty{padding:3rem 1rem;text-align:center;border:2px dashed var(--line)}
.c-empty strong{display:block;font:800 2rem var(--display);text-transform:uppercase;color:var(--navy)}
.c-empty button{border:0;background:none;padding:0;font:inherit;color:var(--red);text-decoration:underline;cursor:pointer}

/* city notes */
.c-notes{margin:clamp(2.5rem,5vw,4rem) 0 0;padding:clamp(1.8rem,4vw,3rem);background:var(--navy);color:var(--paper);display:grid;gap:.6rem;justify-items:start}
.c-notes h2{margin:0;font:800 clamp(2rem,4vw,3rem)/.95 var(--display);text-transform:uppercase}
.c-notes p{margin:0;max-width:34rem}
.c-btn{margin-top:.6rem;display:inline-block;background:var(--red);color:#fff;text-decoration:none;padding:.85rem 1.2rem;font:500 .72rem var(--mono);text-transform:uppercase;letter-spacing:.08em}
.c-btn:hover{color:#fff;background:#c41f24}

@media (max-width:980px){
  .c-grid,.c-picks-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .c-picks-grid .c-pick:nth-child(3){display:none}
}
@media (max-width:760px){
  .c-hero{grid-template-columns:1fr;padding-top:1.6rem}
  .c-collage{height:210px;order:-1;margin:0 -.5rem}
  .c-collage img{width:58%;border-width:5px}
  .c-stamp{width:82px;height:82px;font-size:2rem;right:2%;bottom:2%}
  .c-hero h1{font-size:clamp(4.6rem,24vw,7rem)}
  .c-chips{flex-wrap:nowrap;overflow-x:auto;margin:0 -1rem .6rem;padding:0 1rem .3rem;scrollbar-width:none}
  .c-chips::-webkit-scrollbar{display:none}
  .c-grid{grid-template-columns:1fr}
  .c-picks-grid{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:82%;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -1rem;padding:0 1rem .6rem}
  .c-picks-grid .c-pick{scroll-snap-align:start}
  .c-picks-grid .c-pick:nth-child(3){display:block}
  .c-grid .c-card a{display:grid;grid-template-columns:38% 1fr}
  .c-grid .c-img img{height:100%;aspect-ratio:auto;min-height:150px}
  .c-grid .c-body{padding:.8rem .9rem}
  .c-grid .c-title{font-size:1.35rem}
  .c-grid .c-desc{display:none}
  .c-grid .c-save{top:.45rem;right:auto;left:.45rem;width:32px;height:32px;font-size:1rem}
  .c-head-row{align-items:center}
}
@media (prefers-reduced-motion:reduce){.c-card,.c-img img{transition:none}}

/* hc fix: no lone card in 2-column city grid */
@media (max-width:980px){.c-grid>.c-card:last-child:nth-child(odd){grid-column:1/-1}}