/*
  sitchyapp.com — one stylesheet for every page.

  Colours are Brand Basics V5, the same values app/Sitchy/Palette.swift pins.
  Change them there and here together. Sitchy Orange means exactly one thing,
  "a person vouched for this dish" (Master Plan 3.5), so it appears on this
  site only inside the app icon — never on a link or a button.

  System fonts only: a web-font request is a third party learning who visited.
*/

:root {
  --paper: #F4EDE1;
  --paper-raised: #FFFCF7;
  --paper-sunk: #EBE2D3;
  --ink: #2B2620;
  --ink-secondary: #6E6357;
  --rule: #D9CEBD;
  --measure: 40rem;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1C1814;
    --paper-raised: #1C1814;
    --paper-sunk: #1C1814;
    --ink: #F4EDE1;
    --ink-secondary: #EBE2D3;
    --rule: #3E362E;
    color-scheme: dark;
  }
}

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 1.0625rem/1.6 -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

a { color: inherit; text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 2px; }

.wrap { max-width: var(--measure); margin: 0 auto; padding: 0 1rem; }
@media (min-width: 40rem) { .wrap { padding: 0 1.5rem; } }

.skip { position: absolute; left: -999px; }
.skip:focus { left: 1rem; top: 1rem; background: var(--paper-raised); padding: .5rem .75rem; border: 1px solid var(--ink); }

/* Header */
.site-header { border-bottom: 1px solid var(--rule); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; }
.brand { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.15rem; text-decoration: none; letter-spacing: -0.01em; }
.brand img { width: 2rem; height: 2rem; border-radius: 22%; }
.site-nav { display: flex; gap: 1.25rem; font-size: .95rem; }
.site-nav a { text-decoration: none; color: var(--ink-secondary); }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--ink); text-decoration: underline; }

/* Type */
main { padding: 3rem 0 4rem; }
h1, h2, h3 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 .75rem; }
h1 { font-size: clamp(2.25rem, 7vw, 3.5rem); font-weight: 800; }
h2 { font-size: 1.35rem; font-weight: 700; margin-top: 2.5rem; }
h3 { font-size: 1.05rem; font-weight: 700; margin: 0 0 .35rem; letter-spacing: -0.01em; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.2rem; color: var(--ink-secondary); max-width: 34rem; }
.muted { color: var(--ink-secondary); }
.small { font-size: .9rem; }

/* Home */
.hero { padding-bottom: 1rem; }
.status {
  display: inline-block; margin-top: .5rem; padding: .45rem .8rem;
  border: 1px solid var(--ink); border-radius: 999px; font-size: .95rem; font-weight: 600;
}
.points { list-style: none; padding: 0; margin: 2.5rem 0 0; display: grid; gap: 1rem; }
@media (min-width: 40rem) { .points { grid-template-columns: 1fr 1fr; } }
.points li { background: var(--paper-raised); border: 1px solid var(--rule); border-radius: 14px; padding: 1.1rem 1.2rem; }
.points p { margin: 0; color: var(--ink-secondary); font-size: .98rem; }

.where { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--rule); }

/* Documents (privacy, terms, support) */
.doc h1 { font-size: clamp(2rem, 6vw, 2.75rem); }
.notice { background: var(--paper-sunk); border: 1px solid var(--rule); border-radius: 12px; padding: 1rem 1.2rem; margin: 1.5rem 0; }
.notice p:last-child { margin-bottom: 0; }
.email { font-size: 1.25rem; font-weight: 700; word-break: break-word; }

/* Footer */
.site-footer { border-top: 1px solid var(--rule); padding: 2rem 0 2.5rem; font-size: .9rem; color: var(--ink-secondary); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; margin-bottom: .75rem; }
.site-footer p { margin: 0; }