/* ourtour.app — the public site. Design A "Fairway", chosen by Martin 2026-11-05.
   Plain HTML and CSS: no script, no cookies, no tracking, no web fonts (system font, as the app). */
:root {
  --night: #151513;
  --night-card: #262622;
  --cream: #F2F0E9;
  --cream-muted: #c9c4b8;
  --green: #8fb27a;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--night); color: var(--cream); font-family: var(--sans); font-size: 18px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--cream); outline-offset: 3px; }

.page { min-height: 100%; display: flex; flex-direction: column;
  padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right));
  padding-top: env(safe-area-inset-top); padding-bottom: env(safe-area-inset-bottom); }

nav { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 10px; font-size: 21px; font-weight: 700; letter-spacing: -0.01em; text-decoration: none; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.links { display: flex; gap: 8px; }
.links a, .back { font-size: 17px; font-weight: 600; text-decoration: none; min-height: 44px; display: inline-flex; align-items: center; padding: 0 16px; border-radius: 999px; }
.links a { background: rgba(255, 255, 255, 0.16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.links a:hover { background: rgba(255, 255, 255, 0.26); }
.back { padding-left: 0; }

footer { font-size: 14px; line-height: 1.5; color: var(--cream-muted); padding-block: 20px 26px; }
footer span { white-space: nowrap; }

/* Home: the photo fills the screen. */
.home { position: relative; isolation: isolate; }
.home::before { content: ""; position: fixed; inset: 0; z-index: -2; background: url(images/hero-tall.jpg) center / cover no-repeat; }
.home::after { content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(10,12,10,.6) 0%, rgba(10,12,10,.05) 30%, rgba(10,12,10,.15) 55%, rgba(10,12,10,.85) 100%); }
.home footer { color: rgba(242, 240, 233, 0.85); }
.hero { margin-top: auto; display: grid; gap: 12px; padding-bottom: 4px; }
.hero h1 { font-size: clamp(40px, 7vw, 72px); line-height: 1.04; letter-spacing: -0.025em; margin: 0; text-wrap: balance; max-width: 14ch; }
.hero p { font-size: clamp(19px, 2.2vw, 24px); margin: 0; opacity: 0.92; }

@media (min-width: 720px) {
  .home::before { background-image: url(images/hero.jpg); }
  .page { padding-left: max(48px, env(safe-area-inset-left)); padding-right: max(48px, env(safe-area-inset-right)); }
  nav { padding-block: 24px; }
  .hero { padding-bottom: 12px; }
}

/* About */
.about main { width: 100%; max-width: 640px; margin: 0 auto; padding-block: 8px 24px; }
.about h1 { font-size: 34px; letter-spacing: -0.015em; margin: 8px 0 20px; }
.about ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; }
.about li { display: flex; gap: 14px; font-size: 19px; line-height: 1.4; }
.about li::before { content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--green); margin-top: 10px; }
.about li strong { font-weight: 600; }
.docs { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.docs a { font-size: 17px; font-weight: 600; text-decoration: none; min-height: 52px; display: inline-flex; align-items: center; padding: 0 20px; border-radius: 16px; background: var(--night-card); }
.docs a:hover { background: #33332e; }
.about footer { max-width: 640px; width: 100%; margin: auto auto 0; }