:root{-webkit-text-size-adjust:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,sans-serif;color:#181816;background:#f4f1e9}*{box-sizing:border-box}body{margin:0}main{max-width:1050px;margin:auto;padding:72px 28px}header{margin-bottom:36px}.eyebrow{font-size:12px;letter-spacing:.17em;font-weight:800;color:#746f64}h1{font-family:Georgia,serif;font-size:clamp(34px,7vw,78px);line-height:.95;letter-spacing:-.045em;margin:12px 0 20px;font-weight:500}header p{font-size:18px;color:#625e55}.search-row{display:flex;background:white;border:1px solid #cbc5b9;border-radius:14px;overflow:hidden;box-shadow:0 10px 30px #0000000a}.search-row input{flex:1;border:0;padding:20px;font-size:19px;outline:0}.search-row button{border:0;background:#1f1f1b;color:white;padding:0 30px;font-weight:750;font-size:16px;cursor:pointer}.filters{display:flex;gap:18px;flex-wrap:wrap;padding:16px 5px;color:#5d594f;font-size:14px}.filters input[type=number]{width:54px;border:0;border-bottom:1px solid #aaa;background:transparent}.card{background:#fff;border:1px solid #d9d3c8;border-radius:16px;padding:22px;margin:14px 0;display:grid;grid-template-columns:84px 1fr;gap:20px}.score{width:74px;height:74px;border-radius:50%;border:2px solid #9c8f7d;background:#9c8f7d;color:#fff;display:grid;place-items:center;font:600 25px Georgia}.title{font-size:24px;font-weight:750}.address{color:#777065;margin:5px 0 13px}.badges{display:flex;gap:8px;flex-wrap:wrap}.badge{padding:7px 10px;background:#f1eee7;border-radius:999px;font-size:13px}.badge.hit{background:#e7ecd9}.links{margin-top:13px;display:flex;gap:12px}.links a{color:#292923;font-weight:650}#status{padding:14px 0;color:#6a655c}
.notice{background:#fbf3dc;border:1px solid #e6d6a8;border-radius:10px;padding:11px 14px;margin:10px 0;font-size:14px;color:#5f5330}[hidden]{display:none!important}.search-wrap{position:relative}.suggestions{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:20;margin:0;padding:6px;list-style:none;background:#fff;border:1px solid #cbc5b9;border-radius:12px;box-shadow:0 14px 34px #0000001a;max-height:300px;overflow-y:auto}.suggestions li{padding:11px 13px;border-radius:9px;cursor:pointer;font-size:15px;display:flex;gap:7px;align-items:baseline}.suggestions li[aria-selected=true]{background:#f1eee7}.suggestions .sec{color:#8a8478;font-size:13px}.card{cursor:pointer}
.score.s90{background:#1d5c33;border-color:#1d5c33;color:#fff}
.score.s80{background:#3f8a4a;border-color:#3f8a4a;color:#fff}
.score.s70{background:#8a9a3f;border-color:#8a9a3f;color:#fff}
.score.s60{background:#c8933a;border-color:#c8933a;color:#fff}
.score.s50{background:#c07a3c;border-color:#c07a3c;color:#fff}
.score.s0{background:#9c8f7d;border-color:#9c8f7d;color:#fff}
.map{margin-top:14px;border:1px solid #d9d3c8;border-radius:12px;overflow:hidden;background:#efece4}
.map iframe{display:block;width:100%;height:250px;border:0}
.map .maplink{display:block;padding:8px 12px;font-size:13px;color:#4a463d;background:#f6f3ec}
.pager{display:flex;gap:10px;align-items:center;justify-content:center;padding:22px 0;color:#6a655c;font-size:14px}
.pager button{border:1px solid #cbc5b9;background:#fff;border-radius:9px;padding:8px 15px;font:inherit;cursor:pointer}
.pager button[disabled]{opacity:.4;cursor:default}
.badge{display:inline-flex;align-items:center;gap:6px}
.badge .ico{width:14px;height:14px;flex:none}
.badge.mich{background:#e4e7d4}
.badge.mich .ico+.ico{margin-left:-4px}
.badge img.ico,.badge svg.ico{width:14px;height:14px;flex:none;border-radius:2px}
.badge.icon-only{padding:7px 9px}
.links a.src{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;background:#f1eee7;text-decoration:none}
.links a.src:hover{background:#e4e1d8}
.links a.src img.ico,.links a.src svg.ico{width:16px;height:16px;border-radius:2px}
.links a.src .wordmark{font-size:11px;font-weight:700;color:#4a463d}
/* Styled hover tip rather than the browser's native tooltip. */
[data-tip]{position:relative}
[data-tip]:hover::after,[data-tip]:focus-visible::after{content:attr(data-tip);position:absolute;bottom:calc(100% + 7px);left:50%;transform:translateX(-50%);white-space:nowrap;background:#26251f;color:#fff;font-size:12px;font-weight:500;padding:5px 9px;border-radius:7px;pointer-events:none;z-index:30}
[data-tip]:hover::before,[data-tip]:focus-visible::before{content:"";position:absolute;bottom:calc(100% + 2px);left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:#26251f;pointer-events:none;z-index:30}

.brand{display:flex;align-items:center;gap:9px}
.brandmark{width:26px;height:26px;display:block;color:#181816}

.brand-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.linkish{border:0;background:none;padding:6px 2px;font:inherit;font-size:13px;font-weight:650;color:#5d594f;cursor:pointer;text-decoration:underline;text-underline-offset:3px;text-decoration-color:#c3bcae}
.linkish:hover{color:#181816}
.linkish:focus-visible,.iconish:focus-visible{outline:2px solid #1d5c33;outline-offset:2px;border-radius:4px}
.status-row{display:flex;align-items:center;justify-content:space-between;gap:14px}
#about{border:0;padding:0;background:transparent;max-width:560px;width:calc(100% - 32px)}
#about::backdrop{background:#181816cc}
.modal{background:#fffdf8;border:1px solid #d9d3c8;border-radius:18px;padding:26px 28px 24px;box-shadow:0 24px 60px #0000002e}
.modal-head{display:flex;align-items:center;gap:11px;margin-bottom:14px}
.modal-head h2{font-family:Georgia,serif;font-size:25px;font-weight:500;margin:0;flex:1}
.iconish{border:0;background:none;font-size:26px;line-height:1;color:#8a8478;cursor:pointer;padding:0 4px}
.iconish:hover{color:#181816}
.modal p{margin:0 0 12px;color:#514d45;font-size:15px;line-height:1.6}
.modal .fineprint{font-size:12px;color:#8a8478;margin-top:14px}
.modal-foot{border-top:1px solid #e2ddd2;margin-top:18px;padding-top:16px}
.modal-foot h3{font-family:Georgia,serif;font-size:18px;font-weight:500;margin:0 0 7px}
.cta{display:inline-block;margin-top:6px;background:#1d5c33;color:#fff;text-decoration:none;font-weight:700;font-size:14px;padding:10px 17px;border-radius:10px}
.cta:hover{background:#17492a}

/* The brand is a link home, but it must not read as body-copy link text. */
.brand{text-decoration:none;color:inherit}
.brand:focus-visible{outline:2px solid #1d5c33;outline-offset:4px;border-radius:6px}

/* Long restaurant names and addresses are user data of unbounded length; a
   single unbreakable token was enough to widen the whole page. */
h1,.title,.address,.modal-head h2{overflow-wrap:anywhere}

/* Hover tips are decoration on a touch screen: the tip only appears on tap,
   is nowrap, and is absolutely positioned, so one on a right-hand badge
   pushed the document sideways. The label is on aria-label regardless. */
@media (hover:none){
  [data-tip]:hover::after,[data-tip]:hover::before{content:none}
}

/* ---- mobile ---------------------------------------------------------------
   Phone-first sizing rather than a desktop layout squeezed down: the headline
   wraps naturally instead of at a hard <br>, the score circle stays beside the
   restaurant rather than stacking above it, and every control keeps a finger-
   sized target. */
@media (max-width:700px){
  main{padding:32px 16px 56px}
  header{margin-bottom:26px}
  /* The break is a desktop typographic choice; at phone widths it forces a
     line wider than the screen. */
  h1 br{display:none}
  h1{margin:10px 0 14px;line-height:1.02}
  header p{font-size:16px}

  .search-row{border-radius:12px}
  /* 16px exactly: iOS Safari zooms the viewport on focus below that. */
  .search-row input{padding:15px 16px;font-size:16px;min-width:0}
  .search-row button{padding:0 20px;font-size:15px;white-space:nowrap}
  .suggestions{max-height:min(48vh,300px)}
  .suggestions li{padding:13px}

  .status-row{flex-wrap:wrap;gap:8px}
  #status{padding:12px 0;font-size:14px}

  .card{padding:16px;margin:12px 0;gap:13px;grid-template-columns:56px 1fr;border-radius:14px}
  .score{width:56px;height:56px;font:600 19px Georgia;border-width:1px}
  .title{font-size:18px;line-height:1.25}
  .address{font-size:13px;margin:4px 0 10px}
  .badges{gap:6px}
  .badge{padding:6px 9px;font-size:12px}
  .badge.icon-only{padding:6px 8px}
  .links{gap:9px;margin-top:11px;flex-wrap:wrap}
  /* Comfortably tappable without redrawing the desktop density. */
  .links a.src{width:36px;height:36px}
  .map iframe{height:190px}

  .pager{gap:8px;padding:18px 0}
  .pager button{padding:11px 16px}

  #about{width:calc(100% - 20px);max-height:88vh}
  .modal{padding:20px 18px 18px;border-radius:15px;max-height:88vh;overflow-y:auto}
  .modal-head h2{font-size:21px}
  .modal p{font-size:14px}
  .cta{display:block;text-align:center;padding:13px 17px}
}

/* Small phones (iPhone SE and similar) need the headline to give way first. */
@media (max-width:380px){
  main{padding:26px 13px 48px}
  h1{font-size:30px}
  .card{grid-template-columns:48px 1fr;gap:11px;padding:14px}
  .score{width:48px;height:48px;font:600 17px Georgia}
  .search-row button{padding:0 15px}
}

/* ---- mobile landing screen ------------------------------------------------
   Before a search runs the page holds one screenful: the mark, the headline,
   the tagline and the search box. Top-aligned on a phone that left most of the
   screen empty and read like a desktop page scaled down. Centred, it reads as
   the app's entry screen. It reverts the moment a search runs, because a list
   of results has to start at the top and scroll (see setLanding in app.js).

   100svh, not 100vh: vh on a phone is the viewport with the browser chrome
   *retracted*, so a 100vh block is taller than what you can actually see and
   the content sits off-centre until you scroll. */
@media (max-width:700px){
  body.landing main{
    min-height:100svh;
    display:flex;
    flex-direction:column;
    justify-content:center;
    /* `safe` so a landscape phone, where the block is taller than the screen,
       overflows downward and stays scrollable instead of clipping its own top.
       Declared after the plain value: a browser that does not know the keyword
       drops this line and keeps the one above. */
    justify-content:safe center;
    text-align:center;
    padding-top:calc(58px + env(safe-area-inset-top));
    padding-bottom:calc(28px + env(safe-area-inset-bottom));
  }
  /* The header bar belongs at the top of the screen, not floating in the
     middle of the centred block with it. */
  body.landing .brand-row{
    position:absolute;
    top:calc(16px + env(safe-area-inset-top));
    left:16px;
    right:16px;
  }
  body.landing header{margin-bottom:26px}
  body.landing h1{margin:0 0 14px}
  body.landing #tagline{margin:0}
  /* Empty on the landing screen, so its padding would push the block off centre. */
  body.landing #status{padding:0}
  body.landing .search-row{text-align:left}
}