:root {
  --bg: #f6f5f1;
  --surface: #ffffff;
  --text: #1d2420;
  --muted: #66706a;
  --border: #e4e2db;
  --accent: #2f6b4f;
  --accent-soft: #e3efe8;

  --m-ground: #eef1ea;

  --radius: 18px;
  --shadow: 0 1px 2px rgba(20, 30, 25, .04), 0 8px 24px rgba(20, 30, 25, .06);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121614;
    --surface: #1a201d;
    --text: #e9ece8;
    --muted: #9aa49e;
    --border: #2a322e;
    --accent: #7cc5a0;
    --accent-soft: #20342a;

    --m-ground: #18201c;

    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.55 Inter, system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* ---------- Site header ---------- */

.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 18px 16px 0;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text);
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.brand-mark { width: 28px; height: 28px; flex-shrink: 0; }
.brand-mark rect, .brand-mark circle { fill: var(--accent); }
.brand-mark path { fill: var(--surface); }

/* EN / BS language switch */
.lang-switch {
  display: inline-flex;
  padding: 3px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
}
.lang-switch button {
  min-width: 40px;
  padding: 4px 10px;
  border: 0;
  border-radius: 999px;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .04em;
  cursor: pointer;
}
.lang-switch button:hover { color: var(--text); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--surface); }
.lang-switch button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* A faint illustrated map behind the top of the page, in the same style as
   the Driving/Walking pictures. The streets (::before) are fainter than the
   cemetery and walking route drawn over them (::after). It sits inside the
   search box's form and is positioned from it, so it moves with the search
   box (e.g. when a grave card opens and the heading shrinks) and the route
   always runs just below it. It's always drawn at full size, and is fainter
   behind the heading and search box, fading out at the top, the bottom and
   the sides of very wide screens. 285px is how far the search box sits below
   the top of the map (assets/hero-map.svg) in the design. */
.hero-bg {
  position: absolute;
  top: -285px;
  left: 50%;
  z-index: -1;
  width: 100vw;
  height: 640px;
  margin-left: -50vw;
  pointer-events: none;
  -webkit-mask-image:
    radial-gradient(ellipse 380px 220px at 50% 220px, rgba(0, 0, 0, .2), #000),
    linear-gradient(transparent, #000 60px, #000 35%, transparent),
    linear-gradient(90deg, transparent calc(50% - 700px), #000 calc(50% - 560px), #000 calc(50% + 560px), transparent calc(50% + 700px));
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 380px 220px at 50% 220px, rgba(0, 0, 0, .2), #000),
    linear-gradient(transparent, #000 60px, #000 35%, transparent),
    linear-gradient(90deg, transparent calc(50% - 700px), #000 calc(50% - 560px), #000 calc(50% + 560px), transparent calc(50% + 700px));
  mask-composite: intersect;
}
/* 100vw includes the scroll bar, so the map is a little wider than the page;
   don't let that add a sideways scroll. */
body { overflow-x: clip; }
.hero-bg::before, .hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url(assets/hero-map.svg) center top / 1400px auto no-repeat;
  opacity: .3;
}
.hero-bg::after {
  background-image: url(assets/hero-cemetery.svg);
  opacity: .62;
}
@media (prefers-color-scheme: dark) {
  .hero-bg::before { opacity: .07; }
  .hero-bg::after { opacity: .16; }
}
/* On phones the middle of the map would show only streets; shift it so the
   end of the route and the pin show beside the search box. */
@media (max-width: 600px) {
  .hero-bg::before, .hero-bg::after { background-position: calc(50% - 190px) top; }
}

.wrap {
  flex: 1;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  padding: 0 16px 48px;
}

/* ---------- Hero / search ---------- */

.hero {
  padding: 9vh 0 28px;
  text-align: center;
  transition: padding .35s ease;
}
body.has-detail .hero { padding-top: 24px; }

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
}

h1 {
  margin: 0;
  font: 600 clamp(32px, 6vw, 48px)/1.1 Fraunces, Georgia, serif;
  letter-spacing: -.01em;
}

.lede {
  max-width: 480px;
  margin: 12px auto 28px;
  color: var(--muted);
}

.search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.search input {
  width: 100%;
  padding: 18px 20px 18px 54px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 18px;
  box-shadow: var(--shadow);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus {
  border-color: var(--accent);
  box-shadow: var(--shadow), 0 0 0 4px var(--accent-soft);
}
.search-icon {
  position: absolute;
  top: 50%;
  left: 20px;
  width: 22px;
  height: 22px;
  transform: translateY(-50%);
  fill: none;
  stroke: var(--muted);
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------- Results ---------- */

/* While searching, the page gets extra height *below the footer* so the search
   box can scroll to the top of the screen. --search-offset (set in app.js) is
   how far the search box is from the top of the page. Keeping the space at the
   very bottom means the cemetery-records card and footer stay right under the
   results, even when the search box is emptied. */
body.searching { min-height: calc(100vh + var(--search-offset, 0px)); }
body.searching .wrap { flex: none; }
body { overflow-anchor: none; }

.count, .empty {
  color: var(--muted);
  font-size: 14px;
}
.empty { text-align: center; padding: 24px 0; }

/* Placeholder rows while the records are still loading. */
.skeleton li { padding: 13px 16px; }
.skeleton span {
  display: block;
  width: 45%;
  height: 12px;
  border-radius: 6px;
  background: var(--border);
  animation: pulse 1s ease-in-out infinite alternate;
}
.skeleton span + span { width: 65%; height: 9px; margin-top: 8px; }
@keyframes pulse { to { opacity: .4; } }

/* One card with a divider between rows: name and place on the left,
   years on the right. */
.result-list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  box-shadow: var(--shadow);
}
.result-list li + li { border-top: 1px solid var(--border); }
.result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  color: inherit;
  text-decoration: none;
  transition: background .15s;
}
/* Hover: a soft green row with a green bar on the left, and the arrow on
   the right darkens and nudges along. */
.result:hover, .result:focus-visible {
  background: var(--accent-soft);
  box-shadow: inset 3px 0 0 var(--accent);
  outline: none;
}
.result::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin: 0 2px 0 -2px;
  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  color: var(--border);
  transform: rotate(45deg);
  transition: color .15s, transform .15s;
}
.result:hover::after, .result:focus-visible::after {
  color: var(--accent);
  transform: translateX(3px) rotate(45deg);
}
.r-main { flex: 1; min-width: 0; }
.r-name { display: block; font-weight: 600; line-height: 1.35; }
.result mark {
  padding: 0 1px;
  border-radius: 3px;
  background: var(--accent-soft);
  color: inherit;
  box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--accent) 45%, transparent);
}
.r-place {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.r-dates {
  flex-shrink: 0;
  color: var(--muted);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* ---------- Detail ---------- */

.detail { animation: rise .35s ease; }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }

.back {
  margin-bottom: 12px;
  padding: 6px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.back:hover { color: var(--text); }

.card {
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.person { padding: 28px 24px 24px; }
.person h2 {
  margin: 0;
  font: 600 clamp(28px, 5vw, 34px)/1.15 Fraunces, Georgia, serif;
  letter-spacing: -.01em;
}

/* Born / Passed away, side by side */
.life {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 32px;
  margin: 16px 0 0;
}
.life dt {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.life dd { margin: 2px 0 0; font-size: 16px; }

/* Cemetery and place, set apart by a divider */
.where {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.where[hidden] { display: none; }
.where-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  padding: 8px;
  border-radius: 50%;
  background: var(--accent-soft);
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
}
.where-cemetery { display: block; font-weight: 600; line-height: 1.3; }
.where-place { display: block; color: var(--muted); font-size: 15px; }

/* Google Maps embed: an inset card. Below 520px the iframe keeps a fixed
   520x518 layout and is scaled down as a whole (see --map-scale in app.js),
   so Google's place card and controls aren't squashed. */
.gmap-card {
  position: relative;
  margin: 0 24px;
  height: 340px;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--m-ground);
  box-shadow: var(--shadow);
  container-type: inline-size;
}
/* While a new map loads: frame hidden, soft shimmer over the placeholder. */
.gmap-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, .35) 50%, transparent 70%) 0 0 / 250% 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.gmap-card.loading::after { opacity: 1; animation: shimmer 1.4s linear infinite; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -150% 0; } }
#gmap {
  display: block;
  width: 100%;
  height: 340px;
  border: 0;
  transition: opacity .35s ease;
}
.gmap-card.loading #gmap { opacity: 0; transition: none; } /* hide at once, fade in */
@container (max-width: 519.98px) {
  #gmap {
    position: absolute;
    top: 0;
    left: 0;
    width: 520px;
    max-width: none;
    height: 518px;
    transform: scale(var(--map-scale, 1));
    transform-origin: 0 0;
  }
}
.gmap-card.scaled { height: auto; aspect-ratio: 520 / 518; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0 24px 20px;
}
#panel-google { padding-bottom: 24px; }
.btn {
  display: inline-flex;
  align-items: center;
  padding: 10px 18px;
  border: 1px solid var(--accent);
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.btn[hidden] { display: none; }
.btn:disabled { opacity: .5; cursor: default; }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-secondary[aria-pressed="true"] { background: var(--accent-soft); }


/* ---------- Directions popup ---------- */

.sheet {
  width: min(440px, calc(100% - 32px));
  padding: 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  color: var(--text);
  box-shadow: 0 24px 48px rgba(20, 30, 25, .2);
}
.sheet[open] { animation: rise .2s ease; }
.sheet::backdrop {
  background: rgba(20, 30, 25, .4);
  backdrop-filter: blur(2px);
}

.sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.sheet-head h3 { margin: 0; font-size: 18px; line-height: 1.3; }
.sheet-sub { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.sheet-head form { margin: -4px -4px 0 0; }
.sheet-close {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: var(--bg);
  color: var(--muted);
  cursor: pointer;
  transition: background .15s, color .15s;
}
.sheet-close:hover { background: var(--border); color: var(--text); }
.sheet-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Two tiles side by side: a small map preview on top, icon and label below. */
.sheet-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.opt {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  color: var(--text);
  text-decoration: none;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.opt:hover, .opt:focus-visible {
  border-color: var(--accent);
  box-shadow: var(--shadow);
  transform: translateY(-2px);
  outline: none;
}
.opt-art {
  height: 96px;
  border-bottom: 1px solid var(--border);
  background-size: cover;
  /* The pin sits on the right of each picture; keep it in view. */
  background-position: right center;
}
.opt-art-driving { background-image: url("assets/map-demo.svg"); }
.opt-art-walking { background-image: url("assets/walking-demo.svg"); }
.opt-label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 14px;
  font-size: 16px;
  font-weight: 600;
}
.opt-label svg {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* On phones the popup becomes a sheet that slides up from the bottom. */
@media (max-width: 520px) {
  .sheet {
    width: 100%;
    max-width: 100%;
    margin: auto 0 0;
    padding: 20px 16px calc(20px + env(safe-area-inset-bottom));
    border-width: 1px 0 0;
    border-radius: 20px 20px 0 0;
  }
  .sheet[open] { animation: slide-up .25s ease; }
  .opt-art { height: 84px; }
}
@keyframes slide-up { from { transform: translateY(100%); } }

/* ---------- "Did you find it?" prompt ---------- */

.feedback {
  position: fixed;
  left: 50%;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 20;
  width: min(420px, calc(100% - 32px));
  padding: 18px 18px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: 0 16px 40px rgba(20, 30, 25, .18);
  transform: translateX(-50%);
  animation: fb-in .3s ease;
}
.feedback[hidden] { display: none; }
.feedback:focus, .fb-thanks:focus { outline: none; }
@keyframes fb-in { from { opacity: 0; transform: translate(-50%, 16px); } }

.fb-title { margin: 0 32px 0 0; font-weight: 600; line-height: 1.35; }
.fb-sub { margin: 4px 0 14px; color: var(--muted); font-size: 14px; }
.fb-actions { display: flex; gap: 8px; }
.fb-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
@media (max-width: 400px) {
  .fb-btn { gap: 6px; padding: 10px 8px; font-size: 14px; }
}
.fb-btn:hover, .fb-btn:focus-visible {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent);
  outline: none;
}
.fb-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
  stroke-linecap: round;
}
.fb-thanks { margin: 0 32px 0 0; font-weight: 500; }
.fb-close {
  position: absolute;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.fb-close:hover { background: var(--bg); color: var(--text); }
.fb-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- Route ---------- */

.route {
  margin-top: 24px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.route[hidden] { display: none; }
.route-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.route-head h2 { margin: 0; font: 600 20px/1.2 Fraunces, Georgia, serif; }
.route-count { color: var(--muted); font-size: 14px; }
.route-clear {
  margin-left: auto;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.route-clear:hover { color: var(--text); }

.route-hint { margin: -6px 0 6px; color: var(--muted); font-size: 13px; }
.route-list { margin: 0 0 16px; padding: 0; list-style: none; }
.route-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
}
.route-list li + li { border-top: 1px solid var(--border); }
.route-num {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--surface);
  font-size: 13px;
  font-weight: 600;
}
.route-name { flex: 1; min-width: 0; color: inherit; text-decoration: none; }
.route-name:hover .route-person { color: var(--accent); }
.route-person { display: block; font-weight: 600; line-height: 1.3; }
.route-place {
  display: block;
  overflow: hidden;
  color: var(--muted);
  font-size: 13px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.route-ctrl { flex-shrink: 0; display: flex; gap: 2px; }
.route-ctrl button {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
}
.route-ctrl button:hover:not(:disabled) { background: var(--bg); color: var(--text); }
.route-ctrl svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.route-note { margin: -4px 0 14px; color: var(--muted); font-size: 13px; }
.route-result {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-soft);
}
.route-result[hidden] { display: none; }
.route-result p { flex: 1 1 220px; margin: 0; font-size: 14px; }
/* Once a route is ready, "Open in Google Maps" is the main button. */
.route-result:not([hidden]) + .route-start { background: transparent; color: var(--accent); }

@media (max-width: 520px) {
  .route { padding: 18px 16px; }
  .actions .btn { flex: 1 1 auto; justify-content: center; }
  .route-start, .route-result .btn { width: 100%; justify-content: center; }
}

/* Floating "Your route" button */
.route-fab {
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom));
  z-index: 15;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px 10px 14px;
  border: 0;
  border-radius: 999px;
  background: var(--accent);
  color: var(--surface);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  box-shadow: 0 8px 24px rgba(20, 30, 25, .25);
  cursor: pointer;
  animation: fab-in .25s ease;
}
.route-fab[hidden] { display: none; }
@keyframes fab-in { from { opacity: 0; transform: translateY(12px); } }
.route-fab svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.route-fab-count {
  display: grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface);
  color: var(--accent);
  font-size: 13px;
  font-weight: 600;
}

/* ---------- Add a burial record ---------- */

.submit {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 40px;
  padding: 20px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--surface);
}
.submit-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  padding: 10px;
  border-radius: 50%;
  background: var(--accent-soft);
  fill: none;
  stroke: var(--accent);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.submit-text { flex: 1; min-width: 0; }
.submit h2 { margin: 0; font-size: 17px; }
.submit p { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.submit-btn { flex-shrink: 0; }

@media (max-width: 520px) {
  .submit { flex-wrap: wrap; padding: 20px; }
  .submit-text { flex-basis: calc(100% - 60px); }
  .submit-btn { width: 100%; justify-content: center; }
}

/* ---------- Text pages (privacy) ---------- */

.page { max-width: 680px; padding-top: 24px; }
.page h1 { margin: 8px 0 12px; text-align: left; }
.page .lede { max-width: none; margin: 0 0 8px; }
.page h2 { margin: 32px 0 8px; font: 600 21px/1.25 Fraunces, Georgia, serif; }
.page p, .page li { color: var(--text); }
.page ul { padding-left: 20px; }
.page li + li { margin-top: 6px; }
.page a:not(.back) { color: var(--accent); }
.page .back { display: inline-block; color: var(--muted); text-decoration: none; }
.page .back:hover { color: var(--text); }
.page .updated { margin-top: 32px; color: var(--muted); font-size: 14px; }

/* ---------- Footer ---------- */

/* A thin divider and the small logo mark the end of the page. */
.footer {
  width: calc(100% - 32px); /* lines up with the cards above */
  max-width: 728px;
  margin: 0 auto;
  padding: 24px 0 32px;
  border-top: 1px solid var(--border);
  color: var(--muted);
  font-size: 13px;
  text-align: center;
}
.footer-mark {
  display: block;
  width: 24px;
  height: 24px;
  margin: 0 auto 12px;
}
.footer-mark rect, .footer-mark circle { fill: var(--accent); }
.footer-mark path { fill: var(--surface); }
.footer p { margin: 0 auto; }
.footer p + p { margin-top: 10px; }
.footer .about { max-width: 520px; line-height: 1.6; }
.footer a {
  color: var(--accent);
  font-weight: 500;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 520px) {
  .hero { padding-top: 5vh; }
  .r-place { white-space: normal; }
  .person { padding: 20px; }
  .actions { padding: 0 20px 16px; }
  #panel-google { padding-bottom: 20px; }
  .gmap-card { margin: 0 20px; }
}