/*
  blog.css: moorapp.com/blog (rendered by the Worker, admin/src/content/render.ts), on top of styles.css. The site's night
  palette and type (outside.css), set for long reading: one 40em column, generous leading, no
  motion. Fonts come from fonts.css.
*/

:root {
  /* moorapp.com's night-harbour palette and type (styles.css), mapped onto the blog's names. */
  --void: #060b14;
  --void-2: #0b1526;
  --void-3: #12203a;
  --hairline: rgba(233, 239, 247, .10);
  --frame: rgba(233, 239, 247, .24);
  --cream: #e9eff7;
  --paper: #d3deec;
  --dim: #9fb3cc;
  --ember: #e3b46a;
  --ember-hot: #f2cf8f;
  --ember-wash: rgba(227, 180, 106, .08);
  --signal: #4fd18b;
  --ff-body-x: "Geist", ui-sans-serif, -apple-system, sans-serif;
  --ff-display-x: "Instrument Serif", ui-serif, Georgia, serif;
  --ff-mono-x: "Geist Mono", ui-monospace, Menlo, monospace;
  --measure: 42rem;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; background: var(--void); }
body {
  margin: 0;
  background: var(--void);
  color: var(--paper);
  font: 400 1.0625rem/1.7 var(--ff-body-x);
  font-kerning: normal;
}

a { color: var(--cream); text-decoration-color: var(--ember); text-decoration-thickness: 1px; text-underline-offset: .2em; }
a:hover { color: var(--ember-hot); }
a:focus-visible { outline: 2px solid var(--ember); outline-offset: 2px; border-radius: 2px; }

.skip { position: absolute; left: -9999px; top: 8px; background: var(--cream); color: var(--void); padding: 8px 12px; z-index: 10; }
.skip:focus { left: 16px; }

.top, .foot, main { width: min(100% - 32px, 46rem); margin-inline: auto; }
body.index .top, body.index .foot, body.index main { width: min(100% - 32px, 70rem); }

.top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 24px;
  padding: 24px 0 16px; border-bottom: 1px solid var(--hairline);
}
.top .name { font: 500 1.05rem/1.2 var(--ff-display-x); color: var(--cream); text-decoration: none; }
.top nav { display: flex; gap: 20px; font: 400 .8rem/1 var(--ff-mono-x); letter-spacing: .04em; text-transform: uppercase; }
.top nav a { color: var(--dim); text-decoration: none; }
.top nav a:hover { color: var(--cream); }

main { padding: 48px 0 64px; }

h1, h2, h3 { font-family: var(--ff-display-x); color: var(--cream); font-weight: 400; text-wrap: balance; }
h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3rem); line-height: 1.1; letter-spacing: -.01em; margin: .3em 0 .4em; }
h2 { font-size: 1.6rem; line-height: 1.25; margin: 2.2em 0 .6em; }
h3 { font-size: 1.2rem; line-height: 1.3; margin: 1.8em 0 .4em; }
h2, h3 { scroll-margin-top: 24px; }
p, ul, ol, blockquote, .table { max-width: var(--measure); }
p { margin: 0 0 1.1em; }
ul, ol { padding-left: 1.3em; margin: 0 0 1.2em; }
li { margin: .35em 0; }
li::marker { color: var(--ember); }
strong { color: var(--cream); font-weight: 600; }
code { font: .9em var(--ff-mono-x); background: var(--void-3); padding: .1em .35em; border-radius: 4px; }
pre { background: var(--void-2); border: 1px solid var(--hairline); border-radius: 8px; padding: 16px; overflow-x: auto; }
pre code { background: none; padding: 0; }
blockquote { margin: 1.5em 0; padding: .2em 0 .2em 1.1em; border-left: 2px solid var(--ember); color: var(--cream); }

.table { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--hairline); border-radius: 8px; }
table { border-collapse: collapse; width: 100%; font-size: .95rem; }
th, td { text-align: left; vertical-align: top; padding: 10px 14px; border-bottom: 1px solid var(--hairline); }
th { font: 500 .75rem/1.3 var(--ff-mono-x); letter-spacing: .04em; text-transform: uppercase; color: var(--dim); background: var(--void-2); }
tr:last-child td { border-bottom: 0; }

.crumbs, .byline, .post-meta, .answer-label, .toc-label, .host, .tags, .foot, .pager, .preview-banner {
  font-family: var(--ff-mono-x); font-size: .78rem; letter-spacing: .03em; color: var(--dim);
}
.crumbs a { color: var(--dim); text-decoration: none; }
.crumbs a:hover { color: var(--cream); }
.byline { margin-bottom: 2em; }
.byline a { color: var(--paper); }

.answer {
  max-width: var(--measure);
  border: 1px solid var(--frame); border-left: 2px solid var(--ember);
  background: var(--ember-wash); border-radius: 6px;
  padding: 18px 20px 4px; margin: 0 0 2em;
}
.answer-label { text-transform: uppercase; margin: 0 0 .5em; color: var(--ember-hot); }
.answer p:last-child { color: var(--cream); font-size: 1.1rem; line-height: 1.6; }

.hero { margin: 0 0 2em; }
.hero img { display: block; width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 8px; border: 1px solid var(--hairline); background: var(--void-2); }

.toc { max-width: var(--measure); border-top: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); padding: 14px 0 6px; margin: 0 0 2em; }
.toc-label { text-transform: uppercase; margin: 0 0 .4em; }
.toc ol { margin: 0 0 .6em; font-size: .95rem; }
.toc a { text-decoration: none; color: var(--paper); }
.toc a:hover { color: var(--cream); text-decoration: underline; }

.faq { margin-top: 3em; border-top: 1px solid var(--hairline); }
.faq .qa h3 { margin-top: 1.4em; }
.sources { margin-top: 3em; border-top: 1px solid var(--hairline); font-size: .92rem; }
.sources ol { max-width: 100%; }
.sources li { overflow-wrap: anywhere; }
.host { margin-left: .4em; }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 2.5em 0 0; max-width: none; }
.tag { border: 1px solid var(--hairline); border-radius: 999px; padding: 3px 10px; color: var(--dim); text-decoration: none; }
a.tag:hover { color: var(--cream); border-color: var(--frame); }

.author {
  margin-top: 3em; padding: 20px; max-width: var(--measure);
  border: 1px solid var(--hairline); border-radius: 8px; background: var(--void-2);
}
.author p { margin: 0 0 .6em; font-size: .95rem; }
.author-name { font: 500 1.05rem/1.2 var(--ff-display-x); color: var(--cream); }

.related { margin-top: 4em; border-top: 1px solid var(--hairline); }
.related ul { list-style: none; padding: 0; max-width: none; }
.related li { margin: 0; padding: 18px 0; border-bottom: 1px solid var(--hairline); }
.related li p { margin: .35em 0 0; font-size: .95rem; color: var(--dim); }
.related a { font: 400 1.25rem/1.3 var(--ff-display-x); text-decoration: none; }
.related a:hover { text-decoration: underline; text-decoration-color: var(--ember); }

.intro { margin-bottom: 40px; }
.intro .eyebrow { font: 500 .75rem/1 var(--ff-mono-x); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-hot); margin: 0 0 14px; }
.intro h1 { margin: 0 0 .35em; }
.intro .lede { font-size: 1.1rem; color: var(--paper); max-width: 38rem; }

.topics { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; max-width: none; }
.topics a {
  font: 500 .72rem/1 var(--ff-mono-x); letter-spacing: .06em; text-transform: uppercase; text-decoration: none;
  color: var(--dim); border: 1px solid var(--hairline); border-radius: 999px; padding: 7px 12px;
}
.topics a:hover { color: var(--cream); border-color: var(--frame); }
.topics a[aria-current="page"] { color: var(--void); background: var(--cream); border-color: var(--cream); }

.card { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: 10px; background: var(--void-2); overflow: hidden; transition: border-color .15s; }
.card:hover { border-color: var(--frame); }
.card-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--void-3); border-bottom: 1px solid var(--hairline); }
.card-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card-body { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 20px; flex: 1; }
.card-meta { margin: 0; font: 400 .74rem/1.4 var(--ff-mono-x); letter-spacing: .03em; color: var(--dim); max-width: none; }
.card-title { margin: 0; font-size: 1.3rem; line-height: 1.25; }
.card-title a { text-decoration: none; color: var(--cream); }
.card-title a:hover { text-decoration: underline; text-decoration-color: var(--ember); }
.card-answer {
  margin: 0; font-size: .95rem; line-height: 1.6; color: var(--paper); max-width: none;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.card-more { margin: auto 0 0; padding-top: 6px; font: 500 .74rem/1 var(--ff-mono-x); letter-spacing: .08em; text-transform: uppercase; max-width: none; }
.card-more a { color: var(--ember-hot); text-decoration: none; }
.card-more a:hover { color: var(--cream); }

.card-featured { margin-bottom: 20px; }
.card-featured .card-title { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2rem); }
.card-featured .card-answer { font-size: 1.02rem; -webkit-line-clamp: 4; line-clamp: 4; }
@media (min-width: 760px) {
  .card-featured:not(.no-img) { flex-direction: row; }
  .card-featured .card-img { flex: 0 0 42%; aspect-ratio: 4 / 3; border-bottom: 0; border-right: 1px solid var(--hairline); }
  .card-featured .card-body { padding: 28px 32px; justify-content: center; }
  .card-featured .card-more { margin-top: 8px; }
}
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 20px; }
.empty { color: var(--dim); }
.pager { display: flex; gap: 20px; justify-content: space-between; margin-top: 2em; }

.preview-banner { text-transform: uppercase; color: var(--ember-hot); border: 1px dashed var(--ember); padding: 6px 10px; border-radius: 6px; display: inline-block; }

.foot { border-top: 1px solid var(--hairline); padding: 20px 0 40px; }
.foot p { margin: .3em 0; max-width: none; }
.foot a { color: var(--dim); }

@media (max-width: 480px) {
  body { font-size: 1rem; }
  main { padding-top: 32px; }
  h2 { font-size: 1.4rem; }
}

@media print {
  body { background: #fff; color: #111; }
  .top nav, .related, .skip { display: none; }
  a { color: #111; }
}

/* ---- /services/ ------------------------------------------------------------------------------ */
.svc-contact { margin-top: 18px; font: 500 .8rem/1.6 var(--ff-mono-x); letter-spacing: .04em; max-width: none; }
.svc-sep { color: var(--dim); margin: 0 6px; }
.svc-mail { color: var(--ember-hot); }
.svc-h { font: 500 .78rem/1 var(--ff-mono-x); letter-spacing: .14em; text-transform: uppercase; color: var(--ember-hot); margin: 56px 0 18px; }
.svc-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.svc { border: 1px solid var(--hairline); border-radius: 10px; background: var(--void-2); padding: 20px 22px; display: flex; flex-direction: column; }
.svc h3 { margin: 0 0 10px; font-size: 1.2rem; }
.svc p { margin: 0 0 12px; font-size: .97rem; max-width: none; }
.svc-proof { margin-top: auto !important; padding-top: 12px; border-top: 1px solid var(--hairline); font: 400 .8rem/1.5 var(--ff-mono-x); color: var(--dim); }
.svc-proof a { color: var(--ember-hot); white-space: nowrap; }
.svc-how ol { max-width: 46rem; padding-left: 1.3em; }
.svc-how li { margin: 0 0 12px; }
.svc-area p, .svc-cta p { max-width: 46rem; }
.svc-cta .svc-mail { font: 400 1.6rem/1.2 var(--ff-display-x); }


/* moorapp.com chrome: the fixed site header (styles.css .nav) sits above the article. */
main#content { padding-top: 104px; }