:root { color: #171514; background: #f6f3ee; font-family: Inter, ui-sans-serif, system-ui, sans-serif; } * { box-sizing: border-box; } body { margin: 0; } a { color: #8c2f1c; } .skip-link { position: absolute; left: -999px; } .skip-link:focus { left: 1rem; top: 1rem; z-index: 2; background: #fff; padding: .75rem; } header, main, footer { width: min(1120px, calc(100% - 2rem)); margin-inline: auto; } header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } .brand img { display: block; width: 200px; height: auto; } .board-link, .button { display: inline-block; padding: .7rem 1rem; color: #fff; background: #a93a20; border-radius: .35rem; font-weight: 700; text-decoration: none; } main { padding: 2rem 0 4rem; } .crumb { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; font-size: .9rem; } .eyebrow { margin: 0 0 .45rem; color: #a93a20; font-size: .78rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; } h1 { max-width: 22ch; margin: 0; font-size: clamp(2rem, 5vw, 3.6rem); line-height: 1.03; } h2 { line-height: 1.15; } .lead { max-width: 68ch; font-size: 1.1rem; line-height: 1.6; } .business { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(240px, .85fr); gap: 2rem; align-items: start; } .card-art { width: 100%; aspect-ratio: 1.75; object-fit: contain; background: #fff; border-radius: .5rem; box-shadow: 0 10px 25px #24180d26; } dl { margin: 1.5rem 0; } dt { font-weight: 800; } dd { margin: .15rem 0 1rem; line-height: 1.5; } .contacts { display: flex; flex-wrap: wrap; gap: .8rem; } .listing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(245px, 1fr)); gap: 1rem; } .listing-card { overflow: hidden; background: #fff; border: 1px solid #ded8cf; border-radius: .55rem; } .listing-card img { display: block; width: 100%; aspect-ratio: 1.75; object-fit: contain; background: #fff; } .listing-card div { padding: 1rem; } .listing-card h2 { margin: .2rem 0 .5rem; font-size: 1.15rem; } .listing-card h2 a { color: inherit; } .listing-card p:not(.eyebrow) { line-height: 1.5; } .text-link { font-weight: 750; } section + section { margin-top: 3rem; } footer { display: flex; flex-wrap: wrap; gap: .8rem 1.25rem; padding: 1.5rem 0; border-top: 1px solid #ded8cf; font-size: .9rem; } @media (max-width: 700px) { .business { grid-template-columns: 1fr; } }
