:root { --ink: #171714; --muted: #736f65; --paper: #f5f0e8; --paper-deep: #ebe3d6; --orange: #e85c32; --yellow: #f1ca5b; --sage: #a5ad82; --line: rgba(23, 23, 20, .14); --white: #fffdf8; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: 'DM Sans', Arial, sans-serif; }
a { color: inherit; text-decoration: none; }
button, input, select { font: inherit; }
.site-shell { max-width: 1440px; margin: 0 auto; padding: 0 42px; overflow: hidden; }
.topbar { height: 88px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 700; letter-spacing: -.06em; font-size: 22px; }
.brand-mark { width: 27px; height: 28px; display: inline-block; position: relative; transform: rotate(-8deg); }
.brand-mark i { width: 3px; height: 19px; background: var(--orange); border-radius: 3px; position: absolute; top: 0; }
.brand-mark i:nth-child(1) { left: 4px; transform: rotate(-16deg); }.brand-mark i:nth-child(2) { left: 11px; transform: rotate(-4deg); }.brand-mark i:nth-child(3) { left: 18px; transform: rotate(9deg); }
.brand-mark b { position: absolute; width: 20px; height: 4px; background: var(--orange); border-radius: 4px; left: 2px; bottom: 2px; transform: rotate(50deg); }
.nav-links { display: flex; gap: 32px; margin-left: 90px; font-size: 13px; font-weight: 600; }.nav-links a { color: var(--muted); }.nav-links a.active, .nav-links a:hover { color: var(--ink); }
.topbar-note { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .09em; font-size: 10px; color: var(--muted); display: flex; gap: 8px; align-items: center; }.live-dot, .tiny-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--orange); display: inline-block; }
.hero { min-height: 575px; display: grid; grid-template-columns: 1fr 1fr; align-items: center; position: relative; }.hero-copy { padding: 70px 20px 82px 7%; position: relative; z-index: 2; }.eyebrow, .filter-label { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .15em; font-size: 10px; font-weight: 500; margin: 0 0 18px; color: var(--orange); }.hero h1 { font-size: clamp(58px, 7vw, 104px); line-height: .91; letter-spacing: -.075em; max-width: 650px; margin: 0; font-weight: 700; }.hero h1 em, h2 em { font-family: 'Playfair Display', Georgia, serif; font-weight: 600; letter-spacing: -.08em; }.hero-lede { max-width: 415px; margin: 31px 0 27px; color: var(--muted); font-size: 15px; line-height: 1.55; }.hero-actions { display: flex; align-items: center; gap: 20px; }.button { border-radius: 100px; padding: 14px 19px; font-size: 12px; font-weight: 700; }.button-dark { color: var(--white); background: var(--ink); }.button-dark span { color: var(--yellow); margin-left: 15px; font-size: 17px; }.hero-caption { color: var(--muted); font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.4; }
.hero-art { height: 500px; position: relative; background: var(--orange); margin: 38px 0 37px 8%; overflow: hidden; border-radius: 49% 51% 46% 54% / 44% 40% 60% 56%; transform: rotate(3deg); }.sun { position: absolute; width: 230px; height: 230px; border: 1px solid rgba(255,253,248,.7); border-radius: 50%; left: 18%; top: 9%; }.sun:after { content: ''; position: absolute; inset: 30px; border: 1px solid rgba(255,253,248,.45); border-radius: 50%; }.plate { position: absolute; border-radius: 50%; }.plate-back { width: 310px; height: 310px; background: #d95a32; left: 26%; top: 24%; box-shadow: 0 20px 0 rgba(123,43,27,.14); }.plate-front { width: 278px; height: 278px; background: #f6e8c4; left: 31%; top: 28%; border: 10px solid #f1d79f; box-shadow: inset 0 0 0 1px #b48152; }.plate-front:after { content: ''; position: absolute; inset: 35px; border-radius: 50%; border: 1px solid #c28f62; }.plate-food { position: absolute; display: block; border-radius: 50%; z-index: 2; }.food-one { width: 72px; height: 62px; background: #e56d3d; left: 90px; top: 62px; transform: rotate(-22deg); box-shadow: 38px -13px 0 #bd6039, 57px 21px 0 #e57b42; }.food-two { width: 22px; height: 60px; background: #7f8b4f; left: 75px; top: 139px; transform: rotate(29deg); box-shadow: 16px 9px 0 #9eaa63, 42px -11px 0 #718041; }.food-three { width: 38px; height: 30px; background: #f1ba42; left: 160px; top: 150px; transform: rotate(-13deg); box-shadow: -13px 25px 0 #e79a37; }.leaf { position: absolute; width: 85px; height: 37px; border-radius: 100% 0 100% 0; background: #818b5f; }.leaf-one { right: 6%; top: 9%; transform: rotate(36deg); }.leaf-two { right: 15%; bottom: 18%; transform: rotate(-42deg); background: #68744c; }.leaf-three { left: 6%; bottom: 14%; transform: rotate(105deg); background: #f2c457; }.art-note { position: absolute; bottom: 11%; left: 9%; color: var(--white); font-family: 'Playfair Display', serif; font-style: italic; font-size: 25px; line-height: .85; transform: rotate(-8deg); }
.stat-strip { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); min-height: 100px; display: grid; grid-template-columns: 1fr 1fr 1fr 1.6fr; align-items: center; }.stat-strip > div { border-right: 1px solid var(--line); min-height: 45px; display: flex; flex-direction: column; justify-content: center; padding-left: 28px; }.stat-strip > div:first-child { padding-left: 0; }.stat-strip > div:nth-child(3) { border-right: 0; }.stat-strip strong { font-size: 25px; letter-spacing: -.06em; }.stat-strip span { color: var(--muted); font-size: 11px; margin-top: 3px; }.stat-aside { font-family: 'DM Mono', monospace; font-size: 10px; line-height: 1.5; color: var(--orange); text-align: right; padding-right: 0; }.stat-aside span { color: var(--muted); font-family: 'DM Sans', sans-serif; }
.directory-section { padding: 128px 0 120px; }.section-heading { display: flex; justify-content: space-between; align-items: end; margin-bottom: 63px; }.section-heading h2, .about-section h2 { font-size: clamp(46px, 5vw, 70px); line-height: .94; letter-spacing: -.075em; margin: 0; }.section-intro { max-width: 300px; color: var(--muted); line-height: 1.5; font-size: 13px; margin: 0 10% 5px 0; }.directory-layout { display: grid; grid-template-columns: 218px 1fr; gap: 68px; }.filters { border-top: 1px solid var(--ink); padding-top: 16px; }.filters .filter-label { color: var(--ink); margin-bottom: 13px; }.search-box { display: flex; align-items: center; border-bottom: 1px solid var(--ink); gap: 8px; padding: 4px 0 11px; }.search-box span { font-size: 22px; line-height: 12px; }.search-box input { width: 100%; border: 0; background: none; outline: none; font-size: 12px; color: var(--ink); }.search-box input::placeholder { color: #9d988e; }.filter-group { margin-top: 35px; }.filter-group > .filter-label { margin-bottom: 14px; }.filter-group select { width: 100%; border: 0; border-bottom: 1px solid var(--line); padding: 0 0 11px; background: transparent; color: var(--ink); outline: none; font-size: 12px; }.check-row { display: flex; gap: 9px; align-items: flex-start; color: var(--muted); font-size: 12px; line-height: 1.35; cursor: pointer; }.check-row input { position: absolute; opacity: 0; }.fake-check { width: 15px; height: 15px; border: 1px solid var(--muted); flex: none; position: relative; }.check-row input:checked + .fake-check { background: var(--orange); border-color: var(--orange); }.check-row input:checked + .fake-check:after { content: '✓'; position: absolute; color: white; font-size: 11px; left: 2px; top: -2px; }.sort-options { display: flex; flex-direction: column; gap: 11px; }.sort-options label { display: flex; align-items: center; color: var(--muted); font-size: 12px; cursor: pointer; }.sort-options input { accent-color: var(--orange); margin: 0 9px 0 0; }.filter-footnote { border-top: 1px solid var(--line); margin-top: 46px; padding-top: 13px; font-size: 10px; color: var(--muted); line-height: 1.45; }.filter-footnote .tiny-dot { margin-right: 5px; vertical-align: 1px; }
.results-toolbar { height: 35px; display: flex; justify-content: space-between; align-items: flex-start; color: var(--muted); font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }.text-button { border: 0; background: none; padding: 0; color: var(--orange); cursor: pointer; font-size: 10px; text-transform: uppercase; letter-spacing: .1em; }.restaurant-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 15px; }.restaurant-card { background: var(--white); min-height: 254px; padding: 19px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid transparent; transition: transform .2s, border-color .2s; cursor: pointer; }.restaurant-card:hover { border-color: var(--ink); transform: translateY(-4px); }.card-top { display: flex; justify-content: space-between; align-items: flex-start; }.card-letter { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 50%; font-family: 'Playfair Display', serif; font-size: 20px; background: var(--sage); }.tone-1 { background: var(--yellow); }.tone-2 { background: #e78964; }.tone-3 { background: #bac09b; }.card-badge { font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .08em; font-size: 8px; color: var(--orange); border: 1px solid rgba(232,92,50,.45); padding: 5px 7px; }.card-body { margin-top: 20px; }.card-body h3 { font-size: 18px; line-height: 1.05; letter-spacing: -.045em; margin: 0 0 9px; }.card-location { color: var(--muted); font-size: 11px; line-height: 1.35; min-height: 30px; }.card-bottom { display: flex; justify-content: space-between; align-items: end; border-top: 1px solid var(--line); padding-top: 11px; margin-top: 15px; }.card-meta { color: var(--muted); font-size: 10px; }.card-arrow { font-size: 18px; line-height: 12px; }.load-more { display: block; margin: 40px auto 0; border: 1px solid var(--ink); background: transparent; border-radius: 100px; padding: 12px 18px; cursor: pointer; font-size: 12px; }.load-more span { color: var(--orange); margin-left: 12px; }.empty-state { text-align: center; padding: 70px 0; color: var(--muted); }.empty-icon { display: block; font-size: 40px; color: var(--orange); }.empty-state h3 { color: var(--ink); margin: 8px 0; font-size: 20px; }.empty-state p { margin: 0; font-size: 13px; }
.about-section { background: var(--yellow); min-height: 315px; padding: 58px 8%; display: grid; grid-template-columns: 105px 1fr 280px; gap: 35px; align-items: center; margin: 0 -42px; }.about-section .eyebrow { color: var(--ink); }.about-section > p { font-size: 13px; line-height: 1.55; max-width: 245px; }.about-stamp { width: 75px; height: 75px; display: grid; place-items: center; border: 1px solid var(--ink); border-radius: 50%; font-family: 'Playfair Display', serif; font-size: 26px; line-height: .7; transform: rotate(-10deg); }.about-stamp span { font: 9px 'DM Mono', monospace; margin-top: -2px; }.footer { height: 115px; display: flex; justify-content: space-between; align-items: center; color: var(--muted); font-family: 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .1em; font-size: 9px; }.footer span:first-child { color: var(--ink); font: 700 19px 'DM Sans', sans-serif; text-transform: lowercase; letter-spacing: -.07em; }
.modal[hidden] { display: none; }.modal { position: fixed; inset: 0; z-index: 10; display: flex; justify-content: flex-end; }.modal-backdrop { position: absolute; inset: 0; background: rgba(23,23,20,.42); backdrop-filter: blur(3px); }.detail-panel { width: min(520px, 100%); height: 100%; position: relative; z-index: 1; background: var(--paper); padding: 58px 52px 40px; overflow-y: auto; animation: slide-in .25s ease-out; }.modal-close { position: absolute; top: 22px; right: 28px; border: 0; background: none; cursor: pointer; font-size: 28px; font-weight: 300; }.detail-kicker { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .14em; color: var(--orange); margin-bottom: 18px; }.detail-title { font-size: 47px; line-height: .94; letter-spacing: -.07em; margin: 0 0 15px; }.detail-address { color: var(--muted); font-size: 13px; line-height: 1.5; }.detail-divider { border: 0; border-top: 1px solid var(--line); margin: 35px 0 25px; }.detail-label { font: 10px 'DM Mono', monospace; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 13px; }.menu-list { display: flex; flex-direction: column; gap: 9px; }.menu-row { display: flex; align-items: center; justify-content: space-between; gap: 15px; background: var(--white); padding: 15px; }.menu-row h4 { margin: 0 0 4px; font-size: 14px; }.menu-row p { margin: 0; font-size: 10px; color: var(--muted); }.menu-open { flex: none; color: var(--ink); border-bottom: 1px solid var(--orange); font-size: 10px; padding-bottom: 3px; }.menu-muted { color: var(--muted); font-size: 10px; }.detail-contact { color: var(--orange); font-size: 12px; }.detail-description { color: var(--muted); font-size: 13px; line-height: 1.55; }.hours { display: grid; grid-template-columns: 1fr 1fr; gap: 5px 12px; font-size: 11px; }.hours span:nth-child(odd) { color: var(--muted); }
@keyframes slide-in { from { transform: translateX(30px); opacity: .4; } to { transform: translateX(0); opacity: 1; } }
@media (max-width: 950px) { .site-shell { padding: 0 24px; }.hero-copy { padding-left: 0; }.hero-art { margin-left: 0; }.directory-layout { gap: 35px; }.restaurant-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }.about-section { margin: 0 -24px; padding-left: 7%; padding-right: 7%; } }
@media (max-width: 680px) { .site-shell { padding: 0 18px; }.topbar { height: 72px; }.nav-links { display: none; }.topbar-note { font-size: 8px; }.hero { display: block; min-height: 0; }.hero-copy { padding: 67px 0 35px; }.hero h1 { font-size: 69px; }.hero-art { height: 330px; margin: 12px 8% 35px; }.plate-back { width: 220px; height: 220px; left: 25%; top: 25%; }.plate-front { width: 196px; height: 196px; left: 30%; top: 29%; border-width: 7px; }.plate-front:after { inset: 24px; }.food-one { transform: scale(.7) rotate(-22deg); left: 49px; top: 37px; }.food-two { transform: scale(.7) rotate(29deg); left: 45px; top: 97px; }.food-three { transform: scale(.7) rotate(-13deg); left: 107px; top: 102px; }.sun { width: 170px; height: 170px; }.stat-strip { grid-template-columns: 1fr 1fr; padding: 17px 0; gap: 18px 0; }.stat-strip > div, .stat-strip > div:first-child { padding-left: 0; border: 0; min-height: 35px; }.stat-aside { display: none !important; }.directory-section { padding: 80px 0 76px; }.section-heading { display: block; margin-bottom: 43px; }.section-intro { margin: 24px 0 0; }.directory-layout { display: block; }.filters { margin-bottom: 46px; }.filter-footnote { display: none; }.restaurant-grid { grid-template-columns: 1fr; }.restaurant-card { min-height: 220px; }.about-section { margin: 0 -18px; padding: 47px 8%; display: block; }.about-stamp { margin-bottom: 37px; }.about-section > p { margin-top: 29px; }.footer { height: 125px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-content: center; }.footer span:last-child { grid-column: 2; }.detail-panel { padding: 54px 25px 30px; }.detail-title { font-size: 42px; } }

.brand-logo {
  width: 40px;
  height: 40px;
  object-fit: cover;
  border-radius: 10px;
  background: var(--white);
  flex: none;
}

.site-footer {
  padding: 48px 0 28px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}

.site-footer .brand { color: var(--ink); }

.site-footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr);
  gap: 40px 48px;
  align-items: start;
}

.site-footer-brand p {
  max-width: 36ch;
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.site-footer-nav {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 24px;
}

.site-footer-nav p {
  margin: 0 0 12px;
  color: var(--orange);
  font: 10px/1 'DM Mono', monospace;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.site-footer-nav a {
  display: block;
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 14px;
}

.site-footer-nav a:hover { color: var(--ink); }

.site-footer-bar {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font: 10px/1.4 'DM Mono', monospace;
  letter-spacing: .08em;
  text-transform: uppercase;
}

@media (max-width: 720px) {
  .site-footer-inner,
  .site-footer-nav,
  .site-footer-bar { display: grid; grid-template-columns: 1fr; }
}