:root {
  --sign-blue: #1E4B8F; --ink: #16202B; --ink-2: #4A5763; --ink-3: #5E6B76;
  --page: #F5F5F2; --card: #FFFFFF; --line: #DDE0DB; --divider: #E6E8E3; --pill-border: #C9CEC8;
  --sky: #D6E2E2; --sky-top: #C7D7DA; --ridge-far: #2E6E73; --ridge-near: #1C4A50;
}
* { box-sizing: border-box }
body { margin: 0; background: var(--page); color: var(--ink); font-family: Barlow, system-ui, sans-serif }
a { color: inherit; text-decoration: none }
.wrap { max-width: 640px; margin: 0 auto }

/* Header: ridge + place-name sign */
.hero { position: relative; height: 300px; background: linear-gradient(var(--sky-top), var(--sky) 60%); overflow: hidden }
.hero svg.ridge { position: absolute; bottom: 0; left: 50%; width: 1600px; height: 300px; margin-left: -800px; overflow: visible }
.sign-wrap { position: absolute; left: 0; right: 0; top: 142px; display: flex; flex-direction: column; align-items: center }
.sign { display: block; background: var(--sign-blue); border-radius: 8px; padding: 5px; box-shadow: 0 6px 16px rgba(18,52,59,.35) }
.sign-inner { display: block; border: 3px solid #fff; border-radius: 5px; padding: 10px 26px 8px }
.sign-text { display: block; margin: 0; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 58px; line-height: .95; letter-spacing: .02em; color: #fff; text-transform: uppercase }
.posts { display: flex; gap: 96px }
.posts span { width: 6px; height: 34px; background: #8E979C }
.tagline { margin: 8px 24px 0; font-size: 17px; line-height: 1.45; text-align: center; color: #2C3A44 }

/* Filters (hidden without JS, since they only work with JS) */
html:not(.js) .filters { display: none }
.filters { margin: 28px 16px 0; display: flex; flex-wrap: wrap; gap: 8px }
.filters button { min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--pill-border); background: var(--card); color: var(--ink); font: 600 15px Barlow, sans-serif; cursor: pointer; display: flex; align-items: center; gap: 6px }
.filters button .n { font-weight: 500; opacity: .75 }
.filters button[aria-pressed="true"] { background: var(--sign-blue); border-color: var(--sign-blue); color: #fff }
:is(.filters button, .row, .suggest, .sign, .back, .button):focus-visible { outline: 3px solid var(--sign-blue); outline-offset: 2px }

/* App list */
.list-head { margin: 18px 20px 8px; display: flex; justify-content: space-between; align-items: baseline }
.list-head h2 { margin: 0; font: 700 15px 'Barlow Condensed', sans-serif; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2) }
.list-head span { font-size: 14px; color: var(--ink-2) }
.list { margin: 0 16px; padding: 0; list-style: none; background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden }
.list li + li { border-top: 1px solid var(--divider) }
.list li[hidden] { display: none }
.row { display: flex; align-items: center; gap: 14px; padding: 14px 16px }
.row:hover .name { color: var(--sign-blue) }
.icon { width: 52px; height: 52px; border-radius: 13px; background: var(--sign-blue); display: flex; align-items: center; justify-content: center; flex-shrink: 0 }
.text { display: flex; flex-direction: column; gap: 2px; flex-grow: 1; min-width: 0 }
.name { font-weight: 600; font-size: 17px }
.line { font-size: 14px; line-height: 1.35; color: var(--ink-2) }
.cat { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); margin-top: 2px }
.suggest { margin: 16px 16px 0; padding: 14px 16px; border: 2px dashed #A9B0B4; border-radius: 14px; display: flex; align-items: center; gap: 14px; color: #2C3A44; font-size: 15px; font-weight: 500 }

/* App detail page */
.back { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; margin: 16px 16px 0; padding: 0 4px; font-weight: 500; color: var(--ink-2) }
.back:hover { color: var(--sign-blue) }
.detail { margin: 8px 16px 0; padding: 20px 16px; background: var(--card); border: 1px solid var(--line); border-radius: 14px }
.detail-head { display: flex; align-items: center; gap: 14px }
.detail h1 { margin: 0; font-size: 24px; font-weight: 600; line-height: 1.2 }
.detail-desc { margin: 16px 0 0; font-size: 16px; line-height: 1.5 }
.button { display: flex; align-items: center; justify-content: center; min-height: 48px; margin-top: 20px; border-radius: 999px; background: var(--sign-blue); color: #fff; font-size: 16px; font-weight: 600 }
.soon { display: inline-block; margin: 20px 0 0; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--pill-border); font-size: 14px; font-weight: 600; color: var(--ink-2) }

footer { padding: 48px 24px 32px; text-align: center; font-size: 14px; line-height: 1.5; color: #2C3A44 }