:root {
  --navy: #f4f0e9;
  --navy2: #fffdf9;
  --ink: #202a2d;
  --muted: #586568;
  --teal: #b84b39;
  --amber: #b84b39;
}
html { scroll-padding-top: 22px; }
body { background: #f4f0e9; color: var(--ink); font-family: 'DM Sans', Arial, sans-serif; }
button, select, input { font-family: inherit; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #b84b39; outline-offset: 3px; }
.shell { max-width: 1640px; padding: 0 52px; }
.topbar { height: 82px; gap: 25px; border-bottom: 1px solid #d9d0c5; }
.brand { color: #202a2d; font: 800 25px 'DM Sans', Arial, sans-serif; letter-spacing: -.075em; }
.brand em { color: #b84b39; }
.brand-mark { width: 34px; height: 34px; border: 0; border-radius: 0; color: #b84b39; font-size: 31px; }
.nav { gap: 32px; }
.nav a { color: #354246; font-size: 13px; }
.nav a:hover { color: #b84b39; }
.nav-cta, .saved-toggle { border-color: #c8bcb0; border-radius: 4px; color: #273236; padding: 11px 15px; font-size: 12px; }
.nav-cta:hover, .saved-toggle:hover { border-color: #b84b39; color: #b84b39; }
.saved-heart { color: #b84b39; }
.saved-toggle #saved-count { background: #b84b39; color: #fff; }
.hero { min-height: 610px; border-radius: 5px; border-color: #d5c9bc; box-shadow: none; }
.hero:after { background: linear-gradient(90deg,#0c151ef2 0%,#0c151ec4 33%,#0c151e18 72%),linear-gradient(0deg,#0c151eba,transparent 37%); }
.hero-content { padding: 92px 0 0 75px; max-width: 680px; }
.eyebrow { color: #f6ceac; font-size: 11px; letter-spacing: .17em; }
.eyebrow:before { background: #f6ceac; }
.hero h1 { color: #fffaf3; font: 700 clamp(54px,5.4vw,88px)/.99 Georgia, 'Times New Roman', serif; letter-spacing: -.055em; text-wrap: balance; margin: 24px 0; }
.hero h1 span { color: #f6ceac; }
.hero-copy { color: #f3f0e9; font-size: 18px; max-width: 480px; }
.hero .primary { border: 1px solid #c65b45; border-radius: 4px; background: #c65b45; color: #fff; padding: 15px 20px; }
.hero .primary:hover { background: #a94534; }
.hero .secondary { border-radius: 4px; background: #0b151db3; padding: 15px 20px; }
.hero-meta { left: 75px; font-size: 10px; letter-spacing: .1em; }
.hero-meta i { background: #e1a87e; }
.scene-control { border-radius: 4px; }
.scene-control span { color: #f6ceac; }
.finder { max-width: 1180px; margin-top: -23px; padding: 5px; border: 1px solid #c7b9ac; border-radius: 5px; background: #fffdf9; box-shadow: 0 12px 26px #2a201c20; }
.finder label { min-height: 54px; background: #fffdf9; border-radius: 0; padding: 0 17px; }
.finder label + label { border-left: 1px solid #e1d9ce; }
.finder input { color: #202a2d; font-size: 14px; }
.finder input::placeholder { color: #788487; }
.finder button { border-radius: 3px; background: #b84b39; color: #fff; font-size: 13px; }
.finder button:hover { background: #9e3d2e; }
.intro { margin-top: 72px; }
.kicker { color: #ad4635; font-size: 11px; letter-spacing: .15em; }
.intro h2, .online-head h2, .directory-head h2 { color: #202a2d; font: 700 clamp(34px,3vw,49px)/1.08 Georgia, 'Times New Roman', serif; letter-spacing: -.04em; }
.intro p, .online-head p, .directory-head p { color: #586568; }
.grid { gap: 11px; }
.grid .card, .grid .card:nth-child(2), .grid .card:nth-child(3), .grid .card:nth-child(4) { min-height: 142px; border: 1px solid #d4c9bd; border-radius: 4px; background: #fffdf9; padding: 19px; color: #202a2d; transition: border-color .18s, background .18s; }
.grid .card:hover { transform: none; border-color: #b84b39; background: #fff8f2; }
.grid .card small { color: #a84534; font-size: 10px; }
.grid .card strong { margin-top: 25px; color: #202a2d; font: 700 23px Georgia, 'Times New Roman', serif; }
.grid .card span { color: #586568; font-size: 12px; }
.grid .card b { color: #a84534; }
.guide { margin: 22px 0 0; padding: 23px 27px; border: 0; border-left: 4px solid #b84b39; border-radius: 0; background: #e9e1d6; }
.guide .tag, .guide a { color: #a13f31; }
.guide strong { color: #202a2d; font: 700 18px Georgia, 'Times New Roman', serif; }
.guide p { color: #586568; }
.online { margin: 75px 0 0; }
.online-head { margin-bottom: 20px; }
.shop-grid { gap: 10px; }
.shop-card, .shop-card:nth-child(3n+2) { min-height: 164px; border: 1px solid #d4c9bd; border-radius: 4px; background: #fffdf9; color: #202a2d; padding: 20px; transition: border-color .18s, background .18s; }
.shop-card:hover { transform: none; border-color: #b84b39; background: #fff8f2; }
.shop-card small { color: #a84534; font-size: 10px; letter-spacing: .11em; }
.shop-card strong { color: #202a2d; font: 700 21px Georgia, 'Times New Roman', serif; margin-top: 18px; }
.shop-card span { color: #586568; }
.shop-card b { color: #a84534; font-size: 12px; }
.directory { margin: 80px 0 42px; padding: 39px; border: 1px solid #d7ccc0; background: #fffdf9; }
.directory-head { align-items: start; }
.directory-head p { max-width: 510px; margin-top: 5px; }
.directory-tools { align-items: center; margin: 28px 0 0; padding: 13px 15px; gap: 10px; background: #f3eee7; border-top: 1px solid #ded5ca; border-bottom: 1px solid #ded5ca; }
.directory-tools select, .online-only { border: 1px solid #c9bdb1; border-radius: 3px; background: #fffdf9; color: #273236; padding: 10px 12px; font-size: 13px; }
.online-only input { accent-color: #b84b39; }
.directory-count { color: #a84534; font-size: 13px; }
.store-grid { display: block; border-top: 0; }
.store-card {
  display: grid;
  grid-template-columns: minmax(165px,1.2fr) minmax(110px,.8fr) minmax(180px,1.25fr) minmax(110px,.8fr);
  grid-template-areas: "name place focus links" "location location location links";
  align-items: start;
  gap: 5px 20px;
  min-width: 0;
  padding: 20px 2px;
  border: 0;
  border-bottom: 1px solid #e2d9cf;
  border-radius: 0;
  background: transparent;
}
.store-card-head { grid-area: name; align-items: center; }
.store-card h3 { color: #202a2d; font: 800 17px 'DM Sans', Arial, sans-serif; margin: 0; }
.store-card .place { grid-area: place; color: #a84534; font-size: 12px; line-height: 1.45; }
.store-card p { margin: 0; color: #586568; font-size: 12px; line-height: 1.45; }
.store-card p:nth-of-type(1) { grid-area: focus; }
.store-card p:nth-of-type(2) { grid-area: location; color: #788184; }
.store-links { grid-area: links; display: flex; flex-direction: column; align-items: flex-start; gap: 7px; margin: 0; }
.store-links a { color: #a84534; font-size: 12px; }
.save-store { border: 1px solid #c9bdb1; color: #5b6668; background: #fffdf9; padding: 5px 7px; font-size: 11px; }
.save-store:hover, .save-store[aria-pressed="true"] { border-color: #b84b39; background: #b84b39; color: #fff; }
.directory-note { color: #6b7678; margin: 22px 0 0; }
.research-note { margin: 14px 0 0; color: #626e71; font-size: 12px; line-height: 1.55; }
.review { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin: 0 0 100px; padding: 27px 31px; border: 1px solid #d7ccc0; background: #ebe5dc; }
.review h2 { margin: 8px 0 10px; color: #202a2d; font: 700 27px Georgia, 'Times New Roman', serif; }
.review p { max-width: 590px; margin: 0; color: #586568; font-size: 13px; line-height: 1.6; }
.review details { align-self: center; }
.review summary { width: fit-content; color: #a84534; font-size: 13px; font-weight: 800; cursor: pointer; }
.review-list { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 0 20px; margin-top: 18px; }
.review-item { min-width: 0; padding: 10px 0; border-top: 1px solid #d1c5b9; }
.review-item strong { display: block; color: #273236; font-size: 12px; }
.review-item span { display: block; color: #586568; font-size: 11px; margin-top: 2px; }
.review-item small { display: block; color: #a84534; font-size: 10px; margin-top: 3px; }
.empty { border-color: #d7ccc0; color: #586568; }
.saved-dialog { border-color: #c9bdb1; border-radius: 5px; background: #fffdf9; color: #202a2d; }
.saved-head h2 { font-family: Georgia, 'Times New Roman', serif; }
.saved-head button, .saved-actions button { border-color: #c9bdb1; border-radius: 3px; background: #f3eee7; color: #202a2d; }
.saved-head button:hover, .saved-actions button:hover { border-color: #b84b39; }
.saved-item { border-color: #ded5ca; }
.saved-item span, .saved-actions p { color: #586568; }
.saved-item a { color: #a84534; }
@media (max-width: 1100px) {
  .shell { padding: 0 24px; }
  .store-card { grid-template-columns: 1.1fr .8fr 1.2fr; grid-template-areas: "name place focus" "location location links"; }
  .store-links { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 780px) {
  .store-card { grid-template-columns: 1fr auto; grid-template-areas: "name place" "focus focus" "location location" "links links"; gap: 7px 14px; }
  .store-links { margin-top: 4px; }
  .directory { padding: 26px; }
  .review { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .shell { padding: 0 15px; }
  .topbar { height: 69px; }
  .brand { font-size: 20px; }
  .brand-mark { width: 24px; height: 26px; font-size: 24px; }
  .saved-toggle { padding: 7px 8px; }
  .hero { min-height: 610px; }
  .hero:after { background: linear-gradient(90deg,#0c151ee8,#0c151e75),linear-gradient(0deg,#0c151ee8,transparent 72%); }
  .hero-content { padding: 71px 22px 0; }
  .hero h1 { font-size: clamp(45px,11.8vw,60px); }
  .hero-copy { font-size: 15px; }
  .hero-meta { left: 22px; bottom: 24px; font-size: 8px; }
  .finder { margin: 13px 0 0; }
  .finder label + label { border-left: 0; border-top: 1px solid #e1d9ce; }
  .finder button { min-height: 48px; }
  .intro { margin-top: 57px; }
  .grid { gap: 8px; }
  .grid .card, .grid .card:nth-child(2), .grid .card:nth-child(3), .grid .card:nth-child(4) { min-height: 135px; padding: 13px; }
  .grid .card strong { font-size: 19px; margin-top: 29px; }
  .grid .card span { font-size: 11px; }
  .guide { padding: 20px; }
  .shop-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
  .shop-card, .shop-card:nth-child(3n+2) { min-height: 165px; padding: 13px; }
  .shop-card strong { font-size: 18px; }
  .directory { margin-top: 68px; padding: 20px 15px; }
  .directory-tools { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); padding: 10px; }
  .directory-tools select { width: 100%; }
  .online-only { grid-column: 1 / -1; }
  .directory-count { grid-column: 1 / -1; margin: 0; }
  .store-card { grid-template-columns: 1fr; grid-template-areas: "name" "place" "focus" "location" "links"; padding: 18px 2px; }
  .review { padding: 22px 17px; margin-bottom: 75px; }
  .review-list { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  .shop-grid { grid-template-columns: 1fr; }
  .hero h1 { font-size: 43px; }
}
@media (prefers-reduced-motion: reduce) {
  .shop-card, .grid .card { transition: none; }
}