@font-face { font-family: "PP Mori"; src: url("fonts/PPMori-Regular.otf") format("opentype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "PP Mori"; src: url("fonts/PPMori-Light.otf") format("opentype"); font-weight: 300; font-display: swap; }

:root {
  --ember: #F22233;
  --white: #FFFFFF;
  --text: #0A0A0A;
  --ink: #26221F;
  --muted: #7C766F;
  --hairline: #E7E2DE;
  /* One column for every page: its left edge is the left edge of the "p" in the logo. */
  --col: min(1120px, 84vw);
  --ease: cubic-bezier(.65, 0, .25, 1);
  --nav-h: 96px;           /* space kept free for the fixed nav */
}
@media (max-width: 640px) { :root { --col: calc(100vw - 40px); --nav-h: 84px; } }

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "PP Mori", system-ui, sans-serif;
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  background: var(--ember);
  color: var(--ink);
}
a { color: inherit; }
img { display: block; }

/* ---------- Hero ---------- */
.stage {
  width: var(--col);
  margin: 0 auto;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(28px, 4.2vw, 64px);
  padding: var(--nav-h) 0;          /* symmetric, so the logo sits in the optical centre */
  color: var(--white);
}
.stage { --hero-w: min(860px, 66vw); }   /* logo width; left edge stays on the shared column */
.stage h1 { margin: 0; }
.stage .logo { width: var(--hero-w); height: auto; }
.stage p {
  /* the wordmark ends at 83 % of the lockup width ("protea" without the claim) */
  max-width: calc(var(--hero-w) * .833);
  font-size: clamp(16px, 1.35vw, 20px);
  line-height: 1.5;
}
@media (max-width: 640px) {
  .stage { --hero-w: 100%; }
  .stage p { max-width: 100%; font-size: 16px; }
}

/* ---------- Fixed bottom nav (identical position on every page) ---------- */
.sitenav {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 10;
  padding: 28px 0 max(env(safe-area-inset-bottom), clamp(18px, 3.6vh, 36px));
  color: var(--white);
  transition: color .8s cubic-bezier(.33, 0, .2, 1);
}
.sitenav.light { color: var(--ink); }
.sitenav-inner {
  position: relative;
  width: var(--col);
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 28px;
  font-family: "PP Mori", sans-serif;
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.sitenav a {
  text-decoration: none;
  padding: 10px 0;             /* tap target */
  text-underline-offset: 5px;
  text-decoration-thickness: 1px;
}
.sitenav a:hover, .sitenav a[aria-current="page"] { text-decoration: underline; }
.sitenav .home-link {
  margin-left: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .8s cubic-bezier(.33, 0, .2, 1);
}
.sitenav.light .home-link { opacity: 1; pointer-events: auto; }
@media (max-width: 640px) { .sitenav-inner { gap: 22px; font-size: 11.5px; letter-spacing: .14em; } }

/* ---------- Text pages ---------- */
.legal-text h1 {
  font-weight: 400;
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.1;
  color: var(--text);
  margin-bottom: 8px;
}
.legal-text p { font-size: 17px; line-height: 1.6; }
.legal-text a { text-underline-offset: 3px; }

/* ---------- Rows: the one structure every subpage uses ---------- */
.rows { list-style: none; border-top: 1px solid var(--hairline); margin-top: 40px; }
.rows > * { border-bottom: 1px solid var(--hairline); }
.rows .row { padding: 26px 0; }
.rows .topic {
  display: block;
  font-family: "PP Mori", sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text);
  margin: 0 0 8px;
}

/* ---------- Contact rows (links) ---------- */
.contact-list a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px 24px;
  align-items: center;
  padding: 26px 0;
  text-decoration: none;
}
.contact-list .topic { margin: 0; }
.contact-list .addr { grid-column: 1; font-size: 17px; color: var(--ink); }
.contact-list .arrow {
  grid-row: 1 / span 2; grid-column: 2;
  font-size: 22px;
  color: var(--muted);
  transition: color .2s, transform .25s var(--ease);
}
.contact-list a:hover .arrow, .contact-list a:focus-visible .arrow { color: var(--ember); transform: translateX(4px); }
.contact-list a:hover .addr { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }