/* Mossforge's palette, from the apps' core-ui Color.kt by way of mossforge.app/style.css, so this
   site reads as a sibling of the Withy pages. Every text pairing below is held to WCAG AA by
   test/contrast.test.mjs, which reads these two blocks. */
:root {
  --bg:         #E9E1CE;
  --surface:    #FDFBF4;
  --text:       #1F1D16;
  --muted:      #4F4C40;
  --rule:       #7D7A6C;
  --accent:     #4B6B3B;
  --on-accent:  #FCFBF5;
  --live-bg:    #DCE8CE;
  --live-fg:    #223318;
  --testing-bg: #F3DCC0;
  --testing-fg: #3A2008;
  --warn-bg:    #F2C6BC;
  --warn-fg:    #2B0D07;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:         #121410;
    --surface:    #1B1E17;
    --text:       #E7E5DC;
    --muted:      #A8A79C;
    --rule:       #3C3B33;
    --accent:     #9EC18A;
    --on-accent:  #12200B;
    --live-bg:    #3A4D2E;
    --live-fg:    #C3DDB0;
    --testing-bg: #4A2E17;
    --testing-fg: #F0C79B;
    --warn-bg:    #4A241C;
    --warn-fg:    #F2C6BC;
  }
}

* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 17px/1.65 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-underline-offset: 0.15em; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

img { max-width: 100%; height: auto; display: block; }

/* Header and footer */
.top, .bottom, main { max-width: 64rem; margin: 0 auto; padding-left: 1.25rem; padding-right: 1.25rem; }
.top {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; justify-content: space-between;
  padding-top: 1.25rem; padding-bottom: 1.25rem;
}
.brand {
  color: var(--text); text-decoration: none; font-weight: 700;
  letter-spacing: 0.28em; text-transform: uppercase; font-size: 0.8rem;
}
.top-contact { font-size: 0.9rem; }
.bottom { padding-top: 2rem; padding-bottom: 3rem; color: var(--muted); font-size: 0.9rem; }
.bottom p { border-top: 1px solid var(--rule); padding-top: 1.25rem; margin: 0; }
main { padding-bottom: 2rem; }

/* Type */
h1, h2, h3 { line-height: 1.2; text-wrap: balance; }
h1 { font-size: clamp(1.9rem, 5vw, 2.8rem); margin: 0 0 0.75rem; letter-spacing: -0.01em; }
h2 { font-size: 1.45rem; margin: 3rem 0 0.75rem; }
h3 { font-size: 1.1rem; margin: 2rem 0 0.5rem; }
p, ul, ol { margin: 0 0 1rem; }
li { margin-bottom: 0.4rem; }
.lede { font-size: 1.2rem; color: var(--muted); max-width: 42rem; }
.eyebrow, .crumb {
  font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.75rem;
}
.crumb a { color: inherit; }
code { font-size: 0.9em; background: var(--surface); padding: 0.05em 0.3em; border-radius: 3px; }

/* Home */
.hero { padding: 3rem 0 1rem; }
.hero h1 { max-width: 20ch; }
.button {
  display: inline-block; background: var(--accent); color: var(--on-accent);
  padding: 0.7rem 1.1rem; border-radius: 6px; text-decoration: none; font-weight: 600;
}
.service { margin-top: 2.5rem; }
.service h2 { margin-top: 0; }
.blurb { color: var(--muted); max-width: 42rem; }
.cards { list-style: none; padding: 0; display: grid; gap: 1.25rem; max-width: 52rem; }
.card { margin: 0; }
.card a {
  display: flex; flex-direction: column; height: 100%; text-decoration: none; color: var(--text);
  background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden;
}
.card a:hover { border-color: var(--accent); }
.card-img { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-bottom: 1px solid var(--rule); background: var(--bg); }
.card-img img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.card-body { display: flex; flex-direction: column; gap: 0.5rem; padding: 1.1rem 1.25rem 1.3rem; align-items: flex-start; justify-content: center; }
@media (min-width: 40rem) {
  .card a { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); }
  .card-img { aspect-ratio: auto; min-height: 15rem; border-bottom: 0; border-right: 1px solid var(--rule); position: relative; }
  .card-img img { position: absolute; inset: 0; }
}
.card-title { font-size: 1.2rem; }
.card-summary { color: var(--muted); font-size: 0.95rem; }
.about { max-width: 42rem; }

/* Badges */
.badge {
  display: inline-block; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 999px; border: 1px solid transparent;
}
.badge-live { background: var(--live-bg); color: var(--live-fg); }
.badge-closed-testing { background: var(--testing-bg); color: var(--testing-fg); }
.badge-uncleared { background: var(--warn-bg); color: var(--warn-fg); }
.badges { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.badge-proposal { background: transparent; color: var(--muted); border-color: var(--rule); }
.status { margin: 0 0 1rem; }
.as-of { color: var(--muted); font-size: 0.9rem; margin-left: 0.4rem; }

.uncleared {
  background: var(--warn-bg); color: var(--warn-fg); padding: 0.8rem 1rem; border-radius: 6px; margin: 1rem 0 0;
}

/* Piece pages */
.piece { padding-top: 1.5rem; }
.piece > p, .piece > ul, .piece > ol, .piece > h2, .piece > h3 { max-width: 42rem; }
.piece blockquote { margin: 1.5rem 0; padding: 0.75rem 1.1rem; border-left: 4px solid var(--accent); background: var(--surface); max-width: 42rem; }
.piece blockquote p:last-child { margin-bottom: 0; }

.table-wrap, .piece table { display: block; overflow-x: auto; max-width: 100%; }
table { border-collapse: collapse; margin: 0 0 1.5rem; font-size: 0.93rem; }
th, td { text-align: left; vertical-align: top; padding: 0.5rem 0.9rem 0.5rem 0; border-bottom: 1px solid var(--rule); }
th { font-weight: 600; }
td:first-child { min-width: 9rem; }

/* Screenshots. Full-page captures are many thousands of pixels tall, so each sits in a frame that
   scrolls on its own rather than stretching the page. */
.compare { display: grid; gap: 1.25rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); margin: 1rem 0 2rem; align-items: start; }
.shot { margin: 0 0 1.5rem; }
.compare .shot { margin: 0; }
.frame {
  max-height: 36rem; overflow: auto; border: 1px solid var(--rule); border-radius: 6px; background: var(--surface);
}
.shot.phone .frame { max-width: 18rem; }
.shot.phone { justify-self: center; width: 100%; max-width: 18rem; }
.shot.wide .frame { max-height: none; }
.shot.app { justify-self: center; width: 100%; max-width: 15rem; }
.shot.app .frame { max-height: none; border-radius: 14px; }
figcaption { font-size: 0.85rem; color: var(--muted); margin-top: 0.45rem; }
figcaption strong { color: var(--text); }

.cta { margin-top: 3rem; padding: 1.25rem 1.4rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; max-width: 42rem; }
.cta p { margin: 0; }

/* Print: what `npm run pdf` renders from /print/. */
.print-toc { list-style: none; padding: 0; margin-top: 2rem; }
@media print {
  @page { margin: 0.6in; }
  :root {
    --bg: #FFFFFF; --surface: #FFFFFF; --text: #1F1D16; --muted: #4F4C40; --rule: #B9B5A6; --accent: #4B6B3B;
    --live-bg: #DCE8CE; --live-fg: #223318; --testing-bg: #F3DCC0; --testing-fg: #3A2008;
  }
  body { font-size: 11pt; }
  .top, .bottom, .cta, .uncleared { display: none; }
  main { max-width: none; padding: 0; }
  .hero { padding-top: 0; }
  .print-piece { break-before: page; }
  h2, h3 { break-after: avoid; }
  figure, table, blockquote, .card, tr, .keep { break-inside: avoid; }
  .frame { max-height: 4.2in; overflow: hidden; }
  .shot.wide .frame, .shot.app .frame { max-height: none; }
  .shot.app { max-width: 2.1in; }
  .shot.wide { max-width: 5in; }
  .compare { grid-template-columns: repeat(3, 1fr); }
  .piece a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: var(--muted); }
}