/* Four editorial entries. No pinning, carousels, reveal gates or decorative motion. */
.so { padding: clamp(56px,5vw,76px) var(--edge) 0; background: var(--paper); scroll-margin-top: var(--bar); }
.so__intro { max-width: 900px; margin-inline: auto; text-align: center; }
.so__intro h2 { margin: 16px auto 22px; font: 700 clamp(36px,4.6vw,66px)/1.05 var(--display); letter-spacing: -.045em; text-wrap: balance; }
.so__intro > p:last-child { margin: 0; font: var(--t-body); color: var(--body); }
.so__neighborhood { max-width: 560px; margin: 28px auto 0; }
.so__neighborhood img { display: block; width: 100%; height: auto; }
.so__stories { max-width: 1180px; margin: 0 auto; border-top: 1px solid var(--navy); }
.so__story { display: grid; grid-template-columns: 58px minmax(0,1fr) 230px; gap: clamp(22px,3vw,44px); align-items: center; padding: 54px 0; border-bottom: 1px solid var(--line); }
.so__number { align-self: start; padding-top: 4px; font: 400 15px/1.3 var(--mono); color: var(--orange-ink); }
.so__problem { margin: 0 0 12px; font: 500 14px/1.4 var(--font); color: var(--orange-ink); }
.so__copy h3 { margin: 0 0 18px; max-width: 650px; font: 600 clamp(28px,2.7vw,40px)/1.08 var(--display); letter-spacing: -.035em; text-wrap: balance; }
.so__copy > p:not(.so__problem) { margin: 0; max-width: 650px; font: 400 18px/1.55 var(--font); color: var(--body); text-wrap: pretty; }
.so__copy .tlink { display: inline-block; margin-top: 20px; font-size: 15px; }
.so__art { display: grid; place-items: center; min-height: 225px; padding: 12px; }
.so__art > div { width: 190px; color: var(--navy); padding: 20px; border: 1px solid var(--navy); box-shadow: 4px 5px 0 #17223D22; }
.so__art span { display: block; font: 400 9px/1.35 var(--mono); text-transform: uppercase; }
.so__art b { display: block; font: 600 30px/1.05 var(--display); letter-spacing: -.035em; margin: 18px 0; }
.so__art i { display: block; font: 400 11px/1.4 var(--font); }
.so__flyer { background: #F6D784; transform: rotate(-5deg); }
.so__flyer i { border-top: 1px solid #17223D44; padding-top: 12px; }
.so__listing { background: #E5EDF3; transform: rotate(4deg); }
.so__listing b { font-size: 26px; }
.so__listing i { display: flex; justify-content: space-between; border-top: 1px solid #17223D33; padding-top: 7px; margin-top: 7px; }
.so__listing em { font-style: normal; }
.so__art .so__tag { width: 170px; position: relative; padding-top: 28px; background: var(--orange-ink); color: var(--paper); transform: rotate(-5deg); }
.so__tag::before { content: ''; position: absolute; width: 8px; height: 8px; border-radius: 50%; background: var(--paper); top: 10px; left: calc(50% - 4px); }
.so__tag b { font-size: 31px; }
.so__tag i { padding-top: 10px; border-top: 1px solid #FFFDF766; }
.so__post { transform: rotate(4deg); background: #E7EBDC; }
.so__post img { width: 100%; height: 110px; object-fit: contain; }
.so__post b { margin: 10px 0 0; font-size: 22px; }
@media(max-width:1000px) {
 .so__story { grid-template-columns: 34px minmax(0,1fr) 180px; gap: 22px; }
 .so__art { padding: 5px; }
 .so__art > div { width: 160px; padding: 16px; }
 .so__art b { font-size: 26px; }
 .so__art .so__tag { width: 150px; }
 .so__post b { font-size: 21px; }
}
@media(max-width:760px) {
 .so { padding: 56px 24px 0; }
 .so__intro h2 { font-size: 36px; }
 .so__intro > p:last-child { font-size: 17px; }
 .so__neighborhood { margin-top: 30px; }
 .so__story { display: block; position: relative; padding: 34px 0 36px; }
 .so__number { position: absolute; top: 35px; left: 0; font-size: 11px; }
 .so__problem { margin: 0 0 14px; padding-left: 30px; font-size: 12px; min-height: 17px; }
 .so__copy h3 { font-size: 29px; margin-bottom: 14px; text-wrap: pretty; }
 .so__copy > p:not(.so__problem) { font-size: 16px; line-height: 1.55; }
 .so__copy .tlink { margin-top: 17px; font-size: 14px; }
 .so__art { display: none; }
}
.so__choice { padding: clamp(64px,8vw,112px) var(--edge); text-align: center; background: var(--paper); }
.so__choice h2 { scroll-margin-top: calc(var(--bar) + 24px); margin: 16px auto 24px; font: 700 clamp(32px,4vw,58px)/1.08 var(--display); letter-spacing: -.04em; text-wrap: balance; }
.so__choice h2 span { color: var(--orange-ink); }
.so__choice > p:not(.kicker) { max-width: 670px; margin: 0 auto 28px; font: var(--t-body); color: var(--body); text-wrap: pretty; }
@media(max-width:760px) { .so__choice { padding: 56px 24px; } .so__choice > p:not(.kicker) { font-size: 17px; } }

/* A static set of interlocking capability pieces. Kai marks one store's current focus. */
.so__modules { max-width: 800px; margin: 78px auto 32px; }
.so__module-set { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 14px; align-items: end; }
.so__module { --piece: #F4F1E8; position: relative; padding: 22px 18px; min-height: 150px; text-align: left; border: 1.5px solid var(--navy); border-radius: 3px; background: var(--piece); box-shadow: 3px 4px 0 #17223D14; }
.so__module:nth-child(2) { --piece: #E5EDF3; }
.so__module:nth-child(4) { --piece: #E7EBDC; }
.so__module:not(:last-child)::after { content: ''; position: absolute; width: 14px; height: 28px; right: -15px; top: 58px; z-index: 2; border: 1.5px solid var(--navy); border-left: 0; border-radius: 0 6px 6px 0; background: var(--piece); }
.so__module > span { font: 400 9px/1.3 var(--mono); text-transform: uppercase; }
.so__module > b { display: block; margin-top: 18px; font: 600 24px/1.05 var(--display); letter-spacing: -.03em; }
.so__module--focus { --piece: #F6D784; min-height: 174px; transform: translateY(-10px) rotate(-2deg); box-shadow: 4px 7px 0 #17223D22; z-index: 3; }
.so__module--focus img { position: absolute; width: 65px; height: auto; right: 9px; top: -57px; transform: rotate(2deg); }
.so__module--focus small { display: inline-block; margin-top: 15px; padding: 5px 7px; font: 500 10px/1.2 var(--font); color: var(--paper); background: var(--navy); }
.so__modules figcaption { margin-top: 28px; font: 400 15px/1.45 var(--font); color: var(--body); }
.so__modules figcaption strong { color: var(--navy); font-weight: 600; }
.so__modules figcaption > small { display: block; margin-top: 7px; font: 400 9px/1.3 var(--mono); text-transform: uppercase; letter-spacing: .03em; color: var(--muted); }
@media(max-width:760px) {
 .so__modules { max-width: 380px; margin-top: 32px; margin-bottom: 28px; }
 .so__module-set { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 44px 14px; }
 .so__module { padding: 16px; min-height: 116px; }
 .so__module > span { font-size: 8px; }
 .so__module > b { font-size: 22px; margin-top: 12px; }
 .so__module:nth-child(2)::after { display: none; }
 .so__module:not(:last-child)::after { top: 43px; }
 .so__module--focus { min-height: 139px; transform: rotate(-2deg); }
 .so__module--focus img { width: 48px; top: -40px; right: 10px; }
 .so__module--focus small { margin-top: 12px; padding: 4px; font-size: 9px; }
 .so__modules figcaption { margin-top: 22px; font-size: 14px; }
}