/* One stylesheet for the whole site. No build step, no framework, no JavaScript. */

:root {
  --bg:     #fdfdfc;
  --fg:     #1b1b19;
  --muted:  #5f5f5a;
  --rule:   #e3e3df;
  --accent: #2c6e68;
  --card:   #f5f5f2;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:     #121312;
    --fg:     #e9e9e5;
    --muted:  #9b9b95;
    --rule:   #2a2b29;
    --accent: #7fd0c7;
    --card:   #1a1b1a;
  }
}

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

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

body {
  margin: 0;
  padding: 3rem 1.25rem 5rem;
  background: var(--bg);
  color: var(--fg);
  font: 16px/1.65 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-synthesis-weight: none;
}

main, header, footer { max-width: 44rem; margin: 0 auto; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 0 0 .35rem; letter-spacing: -.02em; }
h2 { font-size: 1.15rem; margin: 2.5rem 0 .6rem; letter-spacing: -.01em; }
h3 { font-size: 1rem;    margin: 1.6rem 0 .4rem; color: var(--muted); font-weight: 600; }

p, ul, ol { margin: 0 0 1rem; }
ul, ol { padding-left: 1.25rem; }
li { margin-bottom: .3rem; }

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

strong { font-weight: 600; }

.lede { font-size: 1.1rem; color: var(--muted); margin-bottom: 2rem; }
.meta { font-size: .875rem; color: var(--muted); }

hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; }

/* The back-link that sits above every page title. */
.up {
  display: inline-block;
  margin-bottom: 1.75rem;
  font-size: .875rem;
  color: var(--muted);
  text-decoration: none;
}
.up:hover { color: var(--accent); text-decoration: underline; }

/* App cards on the index. */
.apps { list-style: none; padding: 0; margin: 0; }
.apps li {
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.1rem 1.25rem;
  margin-bottom: .85rem;
  background: var(--card);
}
.apps h2 { margin: 0 0 .25rem; font-size: 1.05rem; }
.apps p  { margin: 0; color: var(--muted); font-size: .95rem; }
.apps a.title { text-decoration: none; }
.apps a.title:hover { text-decoration: underline; }

/* Store badges. Apple's and Google's own artwork, unmodified — both stores require that.
   The two are sized so the badges themselves match: Google ships its badge with the required
   clear space baked into the image (250px tall for 168px of badge), Apple's has none, so the
   App Store badge gets the difference back as margin. Both end up 40px of badge on a 60px row. */
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 0 .5rem; margin: 1.5rem 0 2.25rem; padding: 0; list-style: none; }
.stores li { margin: 0; }
.stores a { display: block; text-decoration: none; }
.stores img { display: block; width: auto; height: 60px; }
.stores .apple img { height: 40px; margin: 10px 11px; }

/* App screenshots. These are the store's own marketing shots, and each one carries its
   caption inside the image — so they have to be wide enough to read, which is more than a
   fifth of a 44rem column. So they sit in a strip that scrolls sideways instead. */
.shots {
  display: flex;
  gap: .75rem;
  margin: 2rem 0 2.5rem;
  padding: 0 0 .75rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
}
.shots li {
  flex: 0 0 min(58%, 16rem);
  margin: 0;
  scroll-snap-align: start;
}
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--rule);
  border-radius: 12px;
}

.tag {
  display: inline-block;
  padding: .15rem .5rem;
  border-radius: 4px;
  background: var(--card);
  border: 1px solid var(--rule);
  font-size: .75rem;
  color: var(--muted);
  vertical-align: middle;
  margin-left: .4rem;
}

footer {
  margin-top: 4rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  font-size: .875rem;
  color: var(--muted);
}
footer a { color: var(--muted); }

/* Draft banner. Only used on pages that are not ready to be linked from a store listing;
   scripts/check.sh refuses to pass while one is present. */
.draft {
  border: 1px solid var(--accent);
  border-left-width: 4px;
  border-radius: 6px;
  padding: .9rem 1.1rem;
  margin: 0 0 2rem;
  background: var(--card);
  font-size: .925rem;
}
.draft strong { color: var(--accent); }

/* Role list on the bio page. */
.roles { list-style: none; padding: 0; margin: 0; }
.roles li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: .25rem 1rem;
  padding: .7rem 0;
  border-bottom: 1px solid var(--rule);
}
.roles li:last-child { border-bottom: 0; }
.roles .who { font-weight: 600; }
.roles .who span { font-weight: 400; color: var(--muted); }
.roles .when { color: var(--muted); font-size: .875rem; white-space: nowrap; }
.roles .what { flex-basis: 100%; margin: .15rem 0 0; color: var(--muted); font-size: .925rem; }

.skills { font-size: .95rem; }
.skills dt { font-weight: 600; margin-top: .7rem; }
.skills dd { margin: .1rem 0 0; color: var(--muted); }

.inline { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem 1.25rem; }