/* The wordmark face, self-hosted.
 *
 * Served from this origin rather than fonts.googleapis.com so the page makes no
 * third-party request at all — the same reason the rest of the site loads
 * nothing external. The Nautigal is under the Open Font Licence, which permits
 * this. Latin subset only: 22KB, and the site has no other script to set.
 */
@font-face {
  font-family: "The Nautigal";
  font-style: normal;
  font-weight: 700;
  /* block, not swap. swap paints the wordmark in Georgia and then replaces it a
   * moment later, so the first thing anyone sees is the brand set in the wrong
   * face. block holds the text invisible until the real font arrives instead.
   *
   * The usual objection to block is a long blank — it is a 22KB file on this
   * same origin, preloaded in the document head, so in practice it is there
   * before first paint. If it somehow is not, the browser gives up after three
   * seconds and falls back on its own. */
  font-display: block;
  src: url("/fonts/the-nautigal-700.woff2") format("woff2");
}

/* The home page.
 *
 * style.css carries the tokens and the shared pieces the legal pages also use.
 * Everything here belongs to this page alone, so the 74KB Terms document does
 * not pay for a layout it never renders.
 *
 * Built from the design in test2.pen. Where the design is a fixed 1440pt canvas,
 * this is fluid: the same composition has to survive a 375px phone, and the
 * phone is where most people will meet it.
 */

/* ── Top bar ───────────────────────────────────────────────────────────────
 * Sticky, with the wordmark hidden until you scroll past the hero. The hero
 * already says "Olis" three times its size; repeating it directly above is
 * noise. home.js adds .scrolled once the hero is behind you.
 */
.bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  padding: 18px 28px;
  background: var(--bg);
  border-bottom: 1px solid var(--text);
}

.bar-mark {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  font-family: "The Nautigal", Georgia, serif;
  font-size: 30px;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.bar.scrolled .bar-mark { opacity: 1; visibility: visible; }

.bar-nav { display: flex; gap: 26px; }

.bar-nav a {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}

.bar-nav a:hover { color: var(--olive); }

/* ── Shared section furniture ─────────────────────────────────────────────── */

.eyebrow { font-size: 11px; letter-spacing: 0.26em; margin: 0; }
.eyebrow.sky { color: var(--olive); }
.eyebrow.ink { color: var(--text); }

.rule { display: block; width: 200px; height: 1px; background: var(--text); }
.rule.sky-rule { width: 80px; background: var(--olive); }

.section {
  max-width: 1180px;
  margin: 0 auto;
  padding: 96px 28px;
  text-align: center;
}

/* Same reset as .banner h2 — see the note there. */
.section-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 38px);
  line-height: 1.25;
  margin: 18px 0 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

/* ── Hero ─────────────────────────────────────────────────────────────────── */

.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  min-height: 64vh;
  padding: 80px 24px 0;
  text-align: center;
}

.hero-mark {
  font-family: "The Nautigal", Georgia, serif;
  font-weight: 700;
  font-size: clamp(76px, 15vw, 150px);
  line-height: 1;
  margin: 0;
}

.cue {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 24px 0 72px;
  color: var(--text);
  text-decoration: none;
}

/* ── Banner ───────────────────────────────────────────────────────────────── */

.banner {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 78vh;
  padding: 80px 28px;
  /* The wash is a gradient of one colour rather than a flat overlay: the
   * headline sits mid-frame, where the photograph is brightest, and a flat
   * layer dark enough to carry it there flattens the sky at the edges. */
  background:
    linear-gradient(rgba(11, 31, 58, 0.58), rgba(11, 31, 58, 0.72)),
    url("/images/banner-river.jpg") center / cover no-repeat;
}

/* Wide enough that the headline sits on one line on a desktop. At 860px it
 * broke after "going", which put the weakest two words of the sentence on a
 * line of their own. */
.banner-inner { max-width: 1120px; text-align: center; color: #fff; }

/* style.css styles bare h2 as a small uppercase olive label — it is the
 * section heading on the support page. Every h2 here is a display heading
 * instead, so the three properties that carry that look have to be put back
 * explicitly. Setting only the font left the banner rendering in gold caps. */
.banner h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  /* Capped at 54 so 35 characters of Georgia clear 1120px unbroken. Still
   * scales down on narrow screens, where wrapping is correct. */
  font-size: clamp(28px, 4.4vw, 54px);
  line-height: 1.16;
  text-wrap: balance;
  margin: 0 0 22px;
  text-transform: none;
  letter-spacing: normal;
  color: #fff;
}

.banner p { font-size: clamp(15px, 1.5vw, 17px); line-height: 1.75; color: #e6eef7; margin: 0 auto 30px; max-width: 640px; }

.store {
  /* default, not pointer: it is a state, not a control. A hand cursor on
   * something that does nothing is the same lie as the anchor was. */
  cursor: default;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 28px;
  border-radius: 40px;
  background: #fff;
  color: var(--text);
  font-size: 16px;
  text-decoration: none;
}


/* ── Categories ───────────────────────────────────────────────────────────── */

.trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
  margin-top: 44px;
  text-align: center;
}

.trio h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: 26px;
  margin: 0 0 12px;
}

.trio .desc { font-size: 15px; line-height: 1.7; color: #5b6b84; margin: 0 0 10px; }
.trio .caption { font-size: 13px; line-height: 1.6; color: var(--olive); margin: 0; }

/* ── Map showcase ─────────────────────────────────────────────────────────
 * The design overlaps a phone onto a map. Below 900px that overlap stops being
 * a composition and starts being a collision, so the two stack instead and the
 * map becomes a band above the panel.
 */

.stage { position: relative; margin-top: 46px; }

.map {
  position: relative;
  aspect-ratio: 1200 / 520;
  border-radius: 2px;
  background: url("/images/map.jpg") center / cover no-repeat;
}

.pin { position: absolute; width: 96px; height: 96px; }

.pin img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 8px 20px rgba(27, 58, 107, 0.2);
  object-fit: cover;
  display: block;
}

/* Percentages, not pixels: the map scales with the viewport and the pins have
 * to travel with the streets they are standing on. */
.p1 { left: 6%;  top: 17%; }
.p2 { left: 25%; top: 10%; }
.p3 { left: 45%; top: 18%; }
.p4 { left: 38%; top: 52%; }
.p5 { left: 23%; top: 63%; }
.p6 { left: 52%; top: 72%; }
.p7 { left: 63%; top: 34%; }

.phone {
  position: absolute;
  right: 4%;
  top: 8%;
  width: 268px;
  border-radius: 38px;
  background: var(--text);
  padding: 9px;
  box-shadow: 0 20px 48px rgba(27, 58, 107, 0.3);
}

.screen {
  background: var(--surface);
  border-radius: 30px;
  padding: 9px 12px 5px;
  display: flex;
  flex-direction: column;
  gap: 13px;
  text-align: left;
}

.handle { width: 38px; height: 4px; border-radius: 3px; background: #e0d6c8; align-self: center; }
.acts { display: flex; justify-content: flex-end; gap: 11px; color: #8a7a5e; }

.ph-head { display: flex; align-items: center; gap: 10px; }
.thumb { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.ph-name { font-family: Georgia, serif; font-size: 17px; margin: 0 0 2px; }
.ph-meta { font-size: 10px; color: #3aad6e; margin: 0; }

.ph-row { display: flex; align-items: center; justify-content: space-between; }
.ph-label { font-size: 11px; }
.ph-all { font-size: 9px; color: var(--text); }
.ph-votes { font-size: 8px; color: var(--text-muted); }

.avatars { display: flex; gap: 9px; }
.avatars span { display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 7px; color: var(--text-muted); }

/* One avatar style, two contexts — the rating cluster reuses it so a face in
 * Bookmarked List and the same face in the rating read as one person. */
.av {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid #d9a521;
  background: var(--surface);
  color: var(--text);
  font-size: 10px;
  font-style: normal;
}

.rating { display: flex; flex-direction: column; gap: 5px; }
.cluster { position: relative; height: 22px; }

/* Absolute, because each stack sits over the centre of its own share of the
 * bar below — the whole point of the graphic is that the faces line up with the
 * colour they account for. */
.stack { position: absolute; display: flex; }
.stack .av { width: 22px; height: 22px; font-size: 9px; }
/* Overlap, leftmost on top: the order the app draws them in. */
.stack .av + .av { margin-left: -7px; }
.low { left: 8px; }
.high { left: 99px; }
.high .av:first-child { position: relative; z-index: 3; }
.chip { background: #c9a96e; border-color: #d9a521; color: #fff; font-size: 7px; }

.counts { position: relative; height: 11px; font-size: 8px; }
.low-c { position: absolute; left: 0; color: #c45c46; }
.high-c { position: absolute; left: 114px; color: #1b5e20; }

/* .split, not .bar — the sticky header above is .bar, and this inherited its
 * padding, background and border, rendering as an empty box where the red and
 * green proportions should be. */
.split { display: flex; height: 8px; border-radius: 4px; overflow: hidden; }
.split-low { width: 17%; background: #a1291f; }
.split-high { flex: 1; background: #2e7d46; }

.ph-cap {
  margin: 0;
  padding: 6px 9px;
  border-radius: 7px;
  background: #eaf5ec;
  color: #2e7d46;
  font-size: 8px;
  line-height: 1.4;
}

.tags { display: flex; gap: 6px; }
.tags span { padding: 4px 8px; border-radius: 20px; background: var(--olive-soft); color: #8a6a2e; font-size: 8px; }

.rows { list-style: none; margin: 0; padding: 0; }
.rows li { padding: 5px 0; font-size: 10px; color: #5b6b84; }

.tabs { display: flex; justify-content: space-between; padding: 6px 5px 2px; border-top: 1px solid var(--border); }
.tabs span { font-size: 7px; color: #c3cedc; }
.tabs .on { color: var(--text); }

/* ── Divider, About, Contact ──────────────────────────────────────────────── */

.divider { height: 46vh; min-height: 300px; background: url("/images/divider.jpg") center / cover no-repeat; }

.about { display: flex; flex-direction: column; align-items: center; gap: 30px; }

.lead {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(22px, 2.6vw, 34px);
  line-height: 1.4;
  max-width: 960px;
  margin: 0;
}

.about-body { max-width: 880px; display: flex; flex-direction: column; gap: 18px; }
.about-body p { font-size: 17px; line-height: 1.8; color: #5b6b84; margin: 0; }

.contact { padding-top: 0; }
.contact-lead { font-family: Georgia, serif; font-size: clamp(19px, 2.2vw, 24px); margin: 18px 0 0; }

/* ── Footer ───────────────────────────────────────────────────────────────── */

.foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
  max-width: 1180px;
  margin: 0 auto;
  padding: 34px 28px;
  border-top: 1px solid var(--text);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--text);
}

.foot nav { display: flex; gap: 26px; flex-wrap: wrap; }
.foot a { color: var(--text); text-decoration: none; }
.foot a:hover { color: var(--olive); }

/* ── Narrow screens ───────────────────────────────────────────────────────── */

@media (max-width: 900px) {
  .trio { grid-template-columns: 1fr; gap: 40px; }

  /* The overlap becomes a stack. The map keeps its own height rather than the
   * 1200:520 ratio, which at phone width would be a 60px-tall strip. */
  .stage { display: flex; flex-direction: column; align-items: center; gap: 28px; }
  .map { width: 100%; aspect-ratio: auto; height: 300px; }
  .pin { width: 64px; height: 64px; }
  .phone { position: static; width: 268px; }
}

@media (max-width: 560px) {
  .section { padding: 72px 20px; }
  .bar { padding: 14px 18px; gap: 12px; }
  .bar-nav { gap: 14px; }
  .bar-nav a { font-size: 10px; letter-spacing: 0.08em; }
  .bar-mark { font-size: 24px; }
  .banner { min-height: 70vh; }
  .about-body p { font-size: 16px; }
  .foot { justify-content: center; text-align: center; }
}

/* ── Support / Q&A page ────────────────────────────────────────────────────
 * Shares the bar, footer and tokens with the home page so the two read as one
 * site. The old support page had its own header and no navigation, which made
 * it look like somebody else's page once the home page was built.
 */

.qa-head { padding-bottom: 40px; }

/* Same reset as .banner h2 and .section-title: style.css styles bare headings
 * as small uppercase olive labels, and every heading here is a display heading.
 * Forgetting this is what rendered the banner in gold caps. */
.qa-title {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.2;
  margin: 18px 0 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.qa-group { padding-top: 0; padding-bottom: 70px; }

/* Centred column, but the text inside is left-aligned: a centred paragraph of
 * three lines is markedly harder to read than a ragged-right one, and answers
 * are what people come to this page for. */
.qa-list {
  max-width: 900px;
  margin: 26px auto 0;
  text-align: left;
}

.qa { padding: 26px 0; border-bottom: 1px solid var(--border); }

.qa h2 {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.3;
  margin: 0 0 11px;
  padding-top: 0;
  border-top: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

.qa p { font-size: 16px; line-height: 1.75; color: #5b6b84; margin: 0; }
.qa strong { color: var(--text); font-weight: 600; }

.qa-help { padding-top: 10px; padding-bottom: 100px; }

.qa-help-q {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 400;
  font-size: clamp(21px, 2.4vw, 25px);
  margin: 0 0 12px;
  padding-top: 0;
  border-top: 0;
  text-transform: none;
  letter-spacing: normal;
  color: var(--text);
}

/* Wide enough for the sentence to sit on one line on a desktop. At 620px it
 * broke after "come back to", stranding two words. Still wraps on a phone. */
.qa-help p { font-size: 16px; line-height: 1.75; color: #5b6b84; margin: 0 auto; max-width: 860px; }