/* Neighborhood guide pages (Mount Baker, Seward Park, Columbia City, ...)
   Shares colors and fonts with styles.css. Phone layout first; wider screens below.
   To reuse for a new neighborhood: copy neighborhoods/mount-baker/index.html, keep this file as is. */

.nb{--card:#fff}
.nb section{scroll-margin-top:84px}
.crumbs{padding-top:16px;font-size:.8rem;color:var(--ink-soft)}
.crumbs a{color:var(--ink-soft)}

/* hero */
.nb-hero{padding-block:14px 40px}
.nb-hero .photo{position:relative}
.nb-hero .arch{aspect-ratio:4/4.3}
.nb-hero .arch img{object-position:50% 40%}
.nb-hero .stamp{width:92px;height:92px;left:-6px;bottom:-28px;padding:7px}
.nb-hero .eyebrow{margin-top:44px;color:var(--olive)}
.nb-hero h1{font-size:clamp(2.9rem,7vw,5.4rem);line-height:1;margin:.2em 0 .3em}
.nb-hero h1 em{color:var(--olive)}
.nb-hero .lede{font-family:var(--display);font-size:clamp(1.3rem,2.2vw,1.65rem);line-height:1.4;max-width:30ch}
.nb-hero .sub{margin-top:.8em;color:var(--ink-soft);max-width:48ch}
.byline{margin-top:1.2em;font-size:.8rem;color:var(--ink-soft)}

/* quick facts */
.facts2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-top:1px solid var(--rule);margin-bottom:28px}
.facts2 div{padding:14px 12px 14px 0;border-bottom:1px solid var(--rule)}
.facts2 div:nth-child(odd){border-right:1px solid var(--rule)}
.facts2 div:nth-child(even){padding-left:14px}
.facts2 b{display:block;font-family:var(--display);font-weight:400;font-size:1.25rem;line-height:1.2}
.facts2 span{font-size:.8rem;color:var(--ink-soft);line-height:1.45;display:block}

/* jump chips + swipe rows */
.swipe{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(var(--gutter)*-1);padding:4px var(--gutter) 14px;scroll-padding-inline:var(--gutter);scrollbar-width:none}
.swipe::-webkit-scrollbar{display:none}
.chip2{flex:0 0 auto;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;background:#fff;box-shadow:inset 0 0 0 1px #d8cfbc;font-size:.85rem;font-weight:500;color:var(--ink);text-decoration:none;scroll-snap-align:start}
.chip2:hover{box-shadow:inset 0 0 0 1px var(--olive);color:var(--olive)}

/* sections */
.nb-sec{padding-block:48px}
.nb-sec.tint{background:var(--linen)}
.nb-sec h2{font-size:clamp(2.2rem,5vw,3.6rem);margin:.3em 0 .4em}
.nb-sec h2 em{color:var(--olive)}
.nb-sec .eyebrow{color:var(--olive)}
.nb-sec .intro{color:var(--ink-soft);max-width:56ch;margin-bottom:22px}
.prose{display:grid;gap:14px;max-width:60ch}
.ph2{border-radius:14px;overflow:hidden;background:var(--linen)}
.ph2 img{width:100%;height:100%;object-fit:cover}
.todo-ph{display:flex;align-items:flex-end;padding:14px;border:1.5px dashed var(--sage);font-size:.78rem;color:var(--ink-soft);line-height:1.4}

/* Amy's note */
.note2{display:grid;grid-template-columns:96px minmax(0,1fr);gap:16px;align-items:center;background:var(--linen);border-radius:16px;padding:14px;margin-top:24px}
.note2 .ph2{aspect-ratio:3/4;border-radius:10px}
.note2 .eyebrow{margin-bottom:6px}
.note2 p{font-family:var(--display);font-size:1.15rem;line-height:1.45}
.note2 p.eyebrow{font-family:var(--text);font-size:.68rem;line-height:1.4}

/* map */
.map{margin:28px 0 0;background:#fff;border-radius:16px;padding:12px;box-shadow:inset 0 0 0 1px #e8e1d3;max-width:520px}
.map svg{display:block;width:100%;height:auto;font-family:var(--text)}
.map figcaption{font-size:.75rem;color:var(--ink-soft);margin-top:6px}

/* cards (parks, homes) */
.cards{display:flex;gap:14px}
.cards article{flex:0 0 80%;display:flex;flex-direction:column;gap:10px;scroll-snap-align:start;min-width:0}
.cards .ph2{aspect-ratio:4/3}
.cards h3{font-family:var(--display);font-weight:400;font-size:1.4rem;line-height:1.15;margin:4px 0 0}
.cards p{font-size:.92rem;line-height:1.6;color:var(--ink-soft)}

/* food */
.food-pics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-bottom:8px}
.food-pics .ph2{aspect-ratio:3/4}
.spot{padding:16px 0;border-top:1px solid var(--rule)}
.spot:last-of-type{border-bottom:1px solid var(--rule)}
.spot .eyebrow{font-size:.66rem}
.spot h3{font-family:var(--display);font-weight:400;font-size:1.35rem;margin:.15em 0 .1em}
.spot p{font-size:.92rem;color:var(--ink-soft)}
.more-link{margin-top:20px}

/* community */
.club{display:grid;gap:18px}
.club .ph2{aspect-ratio:4/5;max-width:520px}
details.dd{border-top:1px solid var(--rule)}
details.dd:last-of-type{border-bottom:1px solid var(--rule)}
details.dd summary{list-style:none;cursor:pointer;min-height:52px;display:flex;align-items:center;justify-content:space-between;gap:12px;font-family:var(--display);font-size:1.2rem;color:var(--ink)}
details.dd summary::-webkit-details-marker{display:none}
details.dd summary::after{content:"+";font-family:var(--text);font-size:1.3rem;color:var(--olive)}
details.dd[open] summary::after{content:"\2013"}
details.dd ul,details.dd p{margin:0 0 18px;font-size:.92rem;color:var(--ink-soft)}
details.dd ul{padding-left:18px;display:grid;gap:6px}

/* homes */
.homes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 12px}
.homes .ph2{aspect-ratio:1/1;border-radius:12px}
.homes h3{font-family:var(--display);font-weight:400;font-size:1.15rem;line-height:1.2;margin:8px 0 2px}
.homes p{font-size:.84rem;line-height:1.5;color:var(--ink-soft)}

/* market */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.stat2{background:#fff;border-radius:16px;padding:16px;box-shadow:inset 0 0 0 1px #e8e1d3;display:flex;flex-direction:column;gap:2px}
.stat2 b{font-family:var(--display);font-weight:300;font-size:2rem;line-height:1.1}
.stat2 span{font-size:.8rem;color:var(--ink-soft);line-height:1.4}
.src{font-size:.8rem;color:var(--ink-soft);margin-bottom:18px}
.read{margin-top:20px;max-width:60ch}

/* review */
.quote{margin:0;background:#fff;border-radius:18px;padding:24px;box-shadow:inset 0 0 0 1px #e8e1d3;max-width:720px}
.quote blockquote{margin:12px 0 16px;font-family:var(--display);font-size:1.3rem;line-height:1.4}
.quote figcaption{border-top:1px solid var(--rule);padding-top:12px;font-size:.85rem;color:var(--ink-soft)}
.quote figcaption b{display:block;color:var(--ink);font-weight:500}

/* let's talk */
.talk .ph2{aspect-ratio:4/3;margin-bottom:22px}
.talk .ph2 img{object-position:50% 30%}
.talk p.csub{margin-bottom:22px}
.talk .call{margin-top:14px;font-size:.88rem;color:var(--ink-soft)}

/* nearby */
.near a{flex:0 0 62%;aspect-ratio:4/3;border-radius:16px;padding:18px;display:flex;flex-direction:column;justify-content:flex-end;text-decoration:none;scroll-snap-align:start}
.near b{font-family:var(--display);font-weight:400;font-size:1.6rem;line-height:1.1}
.near span{font-size:.82rem}

/* wider screens */
@media (min-width:821px){
  .nb-hero{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:center;padding-block:32px 72px}
  .nb-hero .photo{order:2}
  .nb-hero .eyebrow{margin-top:0}
  .nb-hero .arch{aspect-ratio:4/5}
  .facts2{grid-template-columns:repeat(4,minmax(0,1fr))}
  .facts2 div{border-right:1px solid var(--rule);padding:16px}
  .facts2 div:first-child{padding-left:0}
  .facts2 div:last-child{border-right:0}
  .nb-sec{padding-block:88px}
  .two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
  .cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));overflow:visible;margin:0;padding:0}
  .homes{grid-template-columns:repeat(4,minmax(0,1fr))}
  .stats{grid-template-columns:repeat(4,minmax(0,1fr));max-width:900px}
  .food-pics{max-width:520px}
  .club{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:clamp(40px,6vw,96px);align-items:start}
  .talk{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:center}
  .talk .ph2{margin-bottom:0}
  .near{overflow:visible;margin:0;padding:0}
  .near a{flex:1 1 0}
}