/* Intendente — website.
   The colour comes from the app (Intendente/App/Color+Intendente.swift); the layout does not.
   A web page is not an enlarged iPhone screen. No framework, no dependencies, one file. */

:root {
  --background: #F0E9DE;
  --surface: #FFFCF6;
  --terracotta: #B15A34;
  --brass: #A9832E;
  --ink: #241E18;
  --muted: #6F6153;
  --hairline: #E0D4C1;
  --on-accent: #FFFCF6;
  --shadow: 0 1px 2px rgba(36,30,24,.05), 0 12px 32px -12px rgba(36,30,24,.18);
  --shadow-lift: 0 2px 4px rgba(36,30,24,.06), 0 28px 60px -20px rgba(36,30,24,.3);
  --nav-height: 4.25rem;
  --serif: ui-serif, "New York", "Iowan Old Style", Georgia, serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Helvetica, Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #1B1511;
    --surface: #262019;
    --terracotta: #D07A4E;
    --brass: #D4AF56;
    --ink: #F4ECE0;
    --muted: #B3A798;
    --hairline: #3A3129;
    --on-accent: #1B1511;
    --shadow: 0 1px 2px rgba(0,0,0,.3), 0 12px 32px -12px rgba(0,0,0,.6);
    --shadow-lift: 0 2px 4px rgba(0,0,0,.35), 0 28px 60px -20px rgba(0,0,0,.75);
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

body {
  margin: 0;
  /* Now that the page is short enough to fit one screen, the footer has to be pushed to the
     bottom rather than left floating in the middle of a tall window. */
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--background);
  color: var(--ink);
  font: 400 1.0625rem/1.65 var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Nothing may ever scroll the page sideways. */
  overflow-x: hidden;
}

:focus-visible {
  outline: 2px solid var(--terracotta);
  outline-offset: 3px;
  border-radius: 3px;
}

main { flex: 1; }

.shell { width: min(72rem, 100% - 3rem); margin-inline: auto; }
.narrow { width: min(44rem, 100% - 3rem); margin-inline: auto; }

/* ---------- Header ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  /* Frosted glass where the browser supports it, flat tint where it does not. */
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: saturate(180%) blur(14px);
  -webkit-backdrop-filter: saturate(180%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.nav.scrolled { border-bottom-color: var(--hairline); }
.nav .shell { display: flex; align-items: center; gap: 1.5rem; }

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font: 600 1.15rem/1 var(--serif);
  letter-spacing: -.01em;
  color: var(--ink);
  text-decoration: none;
  margin-right: auto;
}
/* Drawn, not an emoji: three ruled lines, the same mark as the app icon. */
.wordmark .glyph { width: 1.85rem; height: 1.85rem; flex: none; }
.wordmark .glyph rect { fill: var(--terracotta); }
.wordmark .glyph path { stroke: var(--on-accent); stroke-width: 2.4; stroke-linecap: round; fill: none; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: .8rem 1.5rem;
  border-radius: 999px;
  font: 600 1rem/1 var(--sans);
  text-decoration: none;
  border: 1px solid var(--hairline);
  background: var(--surface);
  color: var(--ink);
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .2s ease;
}
.btn:hover { border-color: var(--muted); }

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

.hero { position: relative; padding: clamp(3.5rem, 7vw, 5.5rem) 0 0; text-align: center; }
.hero::before {
  /* A warm bloom behind the headline: depth without a background image. */
  content: "";
  position: absolute;
  top: -10%;
  left: 50%;
  /* Written out rather than with `inset`: the three-value form also sets `left`, and with left,
     right and width all declared the element is over-constrained — left won, the gradient ended
     at 2080px in a 1280px window, and the page scrolled sideways. */
  width: min(60rem, 100%);
  height: 34rem;
  transform: translateX(-50%);
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--brass) 16%, transparent), transparent 62%);
  pointer-events: none;
  z-index: -1;
}

h1 {
  font: 600 clamp(2.4rem, 5.6vw, 4rem)/1.06 var(--serif);
  letter-spacing: -.028em;
  margin: 0 auto 1.15rem;
  max-width: 24ch;
  text-wrap: balance;
}
h1 em { font-style: italic; color: var(--terracotta); }

.lede {
  font-size: clamp(1.1rem, 2.2vw, 1.28rem);
  color: var(--muted);
  margin: 0 auto;
  max-width: 36rem;
  text-wrap: pretty;
}
.cta-note { margin-top: 1.6rem; font-size: .9rem; font-weight: 600; color: var(--muted); }

.hero-shot {
  margin-top: clamp(2.25rem, 4.5vw, 3.25rem);
  display: grid;
  place-items: end center;
  /* The screen rises from the bottom and is cut off, so the page reads as continuing. Faded,
     because a hard cut through the middle of a row looks like a defect rather than a choice. */
  max-height: 28rem;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, #000 74%, transparent);
  mask-image: linear-gradient(to bottom, #000 74%, transparent);
}
.hero-shot img {
  width: min(19rem, 68vw);
  height: auto;
  border-radius: 2.2rem;
  border: 1px solid var(--hairline);
  box-shadow: var(--shadow-lift);
  display: block;
}

/* ---------- The one thing said after the screenshot ---------- */

section { padding: clamp(4rem, 9vw, 7rem) 0; }
.closing { text-align: center; padding-top: clamp(2.5rem, 5vw, 4rem); }
.closing p {
  max-width: 40rem;
  margin: 0 auto 1.75rem;
  color: var(--muted);
  font-size: 1.08rem;
  text-wrap: pretty;
}

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

footer {
  border-top: 1px solid var(--hairline);
  padding: 2.5rem 0;
  color: var(--muted);
  font-size: .93rem;
}
.foot-grid { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 2rem; }
footer .wordmark { margin-right: 0; }
.foot-grid nav { margin-right: auto; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--terracotta); }
.foot-note { margin: 0; font-size: .88rem; }

/* ---------- Prose pages (privacy) ---------- */

.doc { padding: clamp(3rem, 7vw, 5rem) 0 2rem; }
.doc h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); text-align: left; margin-inline: 0; max-width: none; }
.doc .updated { color: var(--muted); font-size: .95rem; margin: 0; }
.doc-body { padding-bottom: 4rem; }
h2 {
  font: 600 clamp(1.4rem, 3vw, 1.75rem)/1.25 var(--serif);
  letter-spacing: -.02em;
  margin: 3rem 0 .9rem;
  text-wrap: balance;
}
.doc-body p { margin: 0 0 1rem; }
.doc-body a { color: var(--terracotta); text-underline-offset: 3px; }
.doc-body ul { padding-left: 1.15rem; margin: 0 0 1rem; }
.doc-body li { margin-bottom: .5rem; }
.doc-body .note {
  background: var(--surface);
  border: 1px solid var(--hairline);
  border-radius: 1.1rem;
  padding: 1.3rem 1.5rem;
  margin: 0 0 1rem;
}
.doc-body .note p:last-child { margin-bottom: 0; }

/* Tables must never widen the page: they scroll on their own. */
.table-scroll { overflow-x: auto; margin: 1.25rem 0 1.75rem; }
.doc-body table { width: 100%; border-collapse: collapse; font-size: .95rem; min-width: 30rem; }
.doc-body th, .doc-body td {
  text-align: left; padding: .8rem .7rem;
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.doc-body th {
  color: var(--muted); font-weight: 600; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .07em;
}