/* The public site at sharphoofcare.com (#425; public-site.md section 3), drawn by
   the Worker (worker/site/). The look picked on the walk (PS1-3212221111,
   prototypes/kit/site.css): the logo's own look, not the app's. Cool paper,
   navy line work, the logo's copper only for the target where two guide lines
   cross the top photo. Montserrat for headings, IBM Plex Sans for reading,
   Plex Mono for prices and the mobile. 2px corners. Light only. A phone first
   (375px); at 1024px and up the PC layout.

   The fonts are served from the site itself, never a font service: each
   font: url below is swapped for the file's hashed name by the site-files
   plugin in vite.config.ts. Classes ps-. */

@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 700; font-display: swap; src: url("/site/montserrat-latin-700-normal.f9d9e65b15.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("/site/ibm-plex-sans-latin-400-normal.3b646991d3.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("/site/ibm-plex-sans-latin-600-normal.8960851d69.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("/site/ibm-plex-mono-latin-400-normal.08949f728d.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/site/ibm-plex-mono-latin-600-normal.0d1f0b8d07.woff2") format("woff2"); }

:root {
  color-scheme: light;
  --bg: #f5f7f9; --card: #ffffff; --sunk: #e6ebf0; --ink: #17202b; --ink2: #3a4757; --faint: #5b6878; --rule: #c4ccd6;
  --brand: #223746; --btn: #223746; --on-btn: #ffffff; --cu: #B0733E;
  --disp: "Montserrat", "IBM Plex Sans", system-ui, sans-serif; --num: "IBM Plex Mono", ui-monospace, monospace; --r: 2px;
}
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--bg); color: var(--ink);
  font: 400 17px/1.5 "IBM Plex Sans", system-ui, sans-serif; -webkit-font-smoothing: antialiased; -webkit-text-size-adjust: 100%;
}
main { flex: 1; }
:where(h1, h2, h3, p, figure, dl, dd, ul) { margin: 0; padding: 0; }
ul { list-style: none; }
h1, h2, h3 { font-family: var(--disp); font-weight: 700; letter-spacing: -.01em; text-wrap: balance; line-height: 1.15; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--cu); outline-offset: 2px; }
.ps-vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.ps-num { font-family: var(--num); font-variant-numeric: tabular-nums; letter-spacing: -.02em; }

/* Preview, on the Dashboard's address only */
.ps-preview { padding: 8px 16px; background: var(--brand); color: #ffffff; font-size: 14px; font-weight: 600; text-align: center; }

/* header */
.ps-head { position: relative; z-index: 3; background: var(--bg); color: var(--brand); border-bottom: 1.5px solid var(--rule); }
.ps-headin { display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 16px; min-height: 60px; max-width: 1180px; margin-inline: auto; }
.ps-logo { flex: none; display: block; line-height: 0; }
.ps-logo img { height: 44px; width: auto; }
.ps-sp { flex: 1; }
.ps-nav { display: flex; align-items: center; text-decoration: none; font-weight: 600; }
.ps-navs { display: none; }
.ps-hjoin { display: none !important; }
.ps-signlink { flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; font-size: 14px; font-weight: 600; white-space: nowrap; text-underline-offset: 3px; }
.ps-menuw > summary { list-style: none; }
.ps-menuw > summary::-webkit-details-marker { display: none; }
.ps-menub { flex: none; width: 44px; height: 44px; display: grid; align-content: center; justify-items: center; gap: 5px; border: 1.5px solid currentColor; border-radius: var(--r); cursor: pointer; }
.ps-menub i { display: block; width: 18px; height: 2px; background: currentColor; }
.ps-menuw[open] .ps-menub { background: var(--brand); color: var(--bg); }
.ps-menu { position: absolute; left: 0; right: 0; top: 100%; z-index: 4; display: grid; background: var(--card); border-bottom: 1.5px solid var(--rule); box-shadow: 0 12px 24px rgb(0 0 0 / 18%); }
.ps-menu .ps-nav { min-height: 52px; padding: 0 20px; border-top: 1px solid var(--rule); color: var(--ink); }
.ps-menu .ps-nav[aria-current] { color: var(--cu); }

/* buttons */
.ps-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0 22px; border-radius: var(--r); background: var(--btn); color: var(--on-btn); font-weight: 600; font-size: 16px; border: 1.5px solid var(--btn); text-decoration: none; }
.ps-btn.ps-ghost { background: transparent; color: var(--brand); border-color: var(--brand); }
.ps-wide { width: 100%; }
.ps-held { position: sticky; bottom: 0; z-index: 2; padding: 10px 16px 14px; background: var(--bg); border-top: 1.5px solid var(--rule); }

/* the page's parts */
.ps-in { max-width: 1120px; margin-inline: auto; padding: 0 20px; display: grid; gap: 14px; }
.ps-sec { padding-block: 36px; border-top: 1.5px solid var(--rule); }
.ps-hero + .ps-sec, .ps-back + .ps-sec { border-top: 0; }
.ps-sec h2, .ps-sec .ps-h { font-size: 27px; display: flex; align-items: center; gap: 12px; }
.ps-sec h2::after, .ps-sec .ps-h::after { content: ""; flex: 1; height: 1.5px; background: var(--brand); opacity: .35; }
.ps-sec h3 { font-size: 18px; }
.ps-sec p { max-width: 62ch; color: var(--ink2); }
.ps-note { font-size: 15px; color: var(--faint) !important; }
.ps-more { justify-self: start; display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brand); text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1.5px; text-decoration-color: var(--cu); }
.ps-back { max-width: 1120px; margin-inline: auto; padding: 6px 20px 0; }
.ps-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; color: var(--brand); text-decoration: none; }

/* the top */
.ps-hero { display: grid; }
.ps-herotext { display: grid; gap: 14px; justify-items: start; padding: 22px 20px 34px; max-width: 1120px; width: 100%; margin-inline: auto; }
.ps-herotext h1 { font-size: 33px; }
.ps-herotext p { font-size: 18px; color: var(--ink2); max-width: 40ch; }
.ps-heroimg { position: relative; overflow: hidden; background: var(--sunk); }
.ps-heroimg img { width: 100%; height: 270px; object-fit: cover; object-position: 50% 40%; }
.ps-guides { display: block; position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ps-guides line { stroke: #ffffff; stroke-width: 1.4; vector-effect: non-scaling-stroke; opacity: .8; }
.ps-target { display: block; position: absolute; left: 50%; top: 56%; width: 26px; height: 26px; margin: -13px 0 0 -13px; border: 2.5px solid var(--cu); border-radius: 50%; pointer-events: none; }

/* about */
.ps-split { grid-template-columns: minmax(0, 1fr); }
.ps-col { display: grid; gap: 14px; min-width: 0; }
.ps-aboutimg { overflow: hidden; border-radius: var(--r); }
.ps-aboutimg img { width: 100%; height: 230px; object-fit: cover; }

/* services */
.ps-plain { display: grid; gap: 4px; }
.ps-svcs { display: grid; border-top: 1.5px solid var(--rule); }
.ps-svc { display: grid; gap: 6px; padding: 16px 0; border-bottom: 1.5px solid var(--rule); }
.ps-svchd { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ps-from { white-space: nowrap; font-size: 15px; color: var(--ink2); }
.ps-from .ps-num { font-size: 17px; font-weight: 600; color: var(--ink); }
.ps-svc p { font-size: 16px; }

/* where I go: the map drawn from the towns (#428) */
.ps-map { border: 1.5px solid var(--rule); border-radius: var(--r); background: var(--card); overflow: hidden; }
.ps-map svg { display: block; width: 100%; height: auto; }
.ps-zone { fill: var(--cu); fill-opacity: .16; stroke: var(--cu); stroke-width: .4; stroke-dasharray: 1.2 .8; }
.ps-river { fill: none; stroke: #5b8db5; stroke-width: .7; stroke-linejoin: round; stroke-linecap: round; }
.ps-state { font-size: 2.6px; fill: var(--faint); font-weight: 600; letter-spacing: .06em; }
.ps-rivername { font-size: 2.2px; fill: #3f6f96; font-style: italic; }
.ps-town circle { fill: var(--brand); }
.ps-town text { font-size: 2.7px; fill: var(--ink); font-weight: 600; paint-order: stroke; stroke: var(--card); stroke-width: .5px; stroke-linejoin: round; }
.ps-town.out circle { fill: var(--card); stroke: var(--faint); stroke-width: .4; }
.ps-town.out text { fill: var(--faint); font-weight: 400; }
.ps-towns { display: grid; gap: 4px; font-size: 16px; }

/* contact */
.ps-cdl { display: grid; gap: 6px; }
.ps-cdl div { display: flex; gap: 12px; align-items: baseline; }
.ps-cdl dt { width: 4.2em; flex: none; color: var(--faint); font-size: 15px; }
.ps-cdl dd { font-weight: 600; font-size: 18px; overflow-wrap: anywhere; }
.ps-cbtns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ps-cbtns .ps-btn { padding: 0 8px; }
.ps-socials { display: flex; gap: 18px; font-weight: 600; }
.ps-socials a { display: inline-flex; align-items: center; min-height: 44px; text-underline-offset: 3px; }

/* gallery */
.ps-pairs { display: grid; gap: 22px; }
.ps-two { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; }
.ps-two div, .ps-one { position: relative; }
.ps-two img { width: 100%; height: 190px; object-fit: cover; }
.ps-one img { width: 100%; height: 220px; object-fit: cover; }
.ps-two span { position: absolute; left: 6px; top: 6px; padding: 2px 7px; font-size: 12.5px; font-weight: 600; background: var(--bg); color: var(--ink); border-radius: var(--r); }
.ps-pair figcaption { margin-top: 8px; color: var(--ink2); }
.ps-pair .ps-when { font-size: 14px; }
.ps-peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.ps-peek img { width: 100%; aspect-ratio: 1; object-fit: cover; }

/* Become a client (#430): the sheet over the page (a <dialog>), and /join with no script */
.ps-formpage { border-top: 0; padding-top: 14px; }
.ps-narrow { max-width: 620px; }
.ps-join { display: grid; gap: 10px; }
.ps-join h2 { font-size: 27px; }
.ps-join p { color: var(--ink2); }
.ps-join .ps-btn { margin-top: 6px; }
.ps-lbl { display: block; font-size: 14.5px; font-weight: 600; color: var(--ink2); margin-top: 4px; }
.ps-input { width: 100%; min-height: 52px; padding: 0 14px; border: 1.5px solid var(--faint); border-radius: var(--r); background: var(--card); color: var(--ink); font: inherit; font-size: 17px; }
button.ps-btn { font: inherit; font-weight: 600; font-size: 16px; cursor: pointer; }
button.ps-btn:disabled { opacity: .6; cursor: default; }
.ps-turnstile { min-height: 65px; margin-top: 6px; }
.ps-priv { font-size: 13.5px; color: var(--faint) !important; }
.ps-priv a { color: var(--ink2); text-underline-offset: 3px; }
.ps-err { padding: 10px 12px; border-left: 4px solid #b3261e; background: #fbeceb; color: #7d1a14 !important; font-size: 15px; }
.ps-smsbox { display: grid; gap: 6px; padding: 14px; border-radius: 14px; background: var(--sunk); }
.ps-smsfrom { font-size: 13px; font-weight: 600; color: var(--faint) !important; }
.ps-sms { color: var(--ink) !important; overflow-wrap: anywhere; }
.ps-joinbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.ps-sheet { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; max-height: 92vh; overflow-y: auto; margin: 0; padding: 20px 20px 24px; border: 0; border-top: 1.5px solid var(--rule); background: var(--bg); color: var(--ink); }
.ps-sheet::backdrop { background: rgb(8 12 16 / 55%); }
.ps-sheet .ps-join h2 { font-size: 23px; padding-right: 40px; }
.ps-x { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; background: transparent; color: var(--brand); font: inherit; font-size: 28px; line-height: 1; cursor: pointer; }

/* the privacy policy */
.ps-policy { max-width: 720px; }
.ps-policy h3 { margin-top: 10px; }

/* footer */
.ps-foot { padding-block: 22px 28px; background: var(--sunk); font-size: 14px; }
.ps-foot .ps-in { gap: 6px; }
.ps-foot p { color: var(--faint); }
.ps-flinks { display: flex; flex-wrap: wrap; column-gap: 18px; }
.ps-flinks a { display: inline-flex; align-items: center; min-height: 40px; text-underline-offset: 3px; color: var(--ink2); }
.ps-credit { font-size: 12.5px; }

/* the PC */
@media (min-width: 1024px) {
  .ps-headin { padding: 10px 28px; min-height: 76px; }
  .ps-menuw, .ps-held, .ps-sp { display: none; }
  .ps-logo img { height: 56px; }
  .ps-navs { flex: 1; display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 2px; margin-left: 24px; }
  .ps-navs .ps-nav { min-height: 44px; padding: 0 12px; font-size: 15px; border-bottom: 2.5px solid transparent; }
  .ps-navs .ps-nav[aria-current] { border-bottom-color: var(--cu); }
  .ps-signlink { margin-left: auto; padding-left: 14px; }
  .ps-hjoin { display: inline-flex !important; min-height: 44px; padding: 0 12px; font-size: 14.5px; white-space: nowrap; margin-left: 8px; }
  .ps-in, .ps-back { padding-inline: 40px; }
  .ps-sec { padding-block: 64px; }
  .ps-sec h2, .ps-sec .ps-h { font-size: 38px; }
  .ps-herotext { padding: 40px 40px 56px; }
  .ps-herotext h1 { font-size: 54px; max-width: 16ch; }
  .ps-herotext p { font-size: 20px; }
  .ps-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; max-width: 1180px; margin-inline: auto; width: 100%; }
  .ps-hero .ps-heroimg { order: 2; margin: 28px 28px 28px 0; }
  .ps-hero .ps-heroimg img { height: 470px; }
  .ps-split { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 56px; align-items: center; }
  .ps-aboutimg img { height: 400px; }
  .ps-svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 48px; border-top: 0; }
  .ps-svc { border-top: 1.5px solid var(--rule); border-bottom: 0; }
  .ps-pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; }
  .ps-two img, .ps-one img { height: 280px; }
  .ps-peek { grid-template-columns: repeat(3, minmax(0, 260px)); }
  .ps-cbtns { grid-template-columns: repeat(3, 160px); }
  .ps-map { max-width: 820px; }
  .ps-sheet { inset: 0; margin: auto; width: 480px; height: fit-content; border: 1.5px solid var(--rule); border-radius: var(--r); }
}