:root {
  --ink:#242b39;
  --muted:#687084;
  --line:#e5e6eb;
  --accent:#5b4bd6;
  --paper:#fafaf8;
  font:17px/1.75 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:var(--ink);
  background:var(--paper)
}
* {
  box-sizing:border-box
}
html {
  min-height:100%
}
body {
  margin:0;
  min-height:100vh;
  display:flex;
  flex-direction:column
}
body>main {
  flex:1 0 auto;
  width:100%
}
a {
  color:inherit;
  text-decoration:none
}
a:hover {
  color:var(--accent);
  text-decoration:underline
}
h1,h2,h3,p {
  margin-block:0 1.2rem
}
h1,h2,h3 {
  line-height:1.15;
  letter-spacing:-.045em
}
button,input {
  font:inherit
}
button {
  cursor:pointer
}
img {
  max-width:100%;
  height:auto
}
a,input,button {
  outline-offset:5px
}
:focus-visible {
  outline:3px solid #b9acf9
}
.wrapper {
  width:100%;
  max-width:1160px;
  margin-inline:auto;
  padding-inline:42px
}
.site-header {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:25px;
  min-height:110px;
  border-bottom:1px solid var(--line)
}
.site-brand {
  display:flex;
  align-items:center;
  gap:14px;
  font-weight:740;
  letter-spacing:-.045em;
  font-size:1.2rem;
  text-decoration:none!important;
  overflow-wrap:anywhere
}
.site-logo {
  display:block;
  width:auto;
  max-width:min(240px,48vw);
  max-height:54px;
  object-fit:contain
}
.orbit-mark {
  display:inline-block;
  flex:none;
  width:30px;
  height:30px;
  border:1.5px solid var(--accent);
  border-radius:50%;
  position:relative;
  transform:rotate(-28deg)
}
.orbit-mark:after {
  content:"";
  position:absolute;
  inset:7px -6px;
  border:1.5px solid var(--accent);
  border-radius:50%
}
.site-nav {
  display:flex;
  justify-content:end;
  align-items:center;
  flex-wrap:wrap;
  gap:10px 23px;
  font-size:.78rem
}
.feed-link {
  color:var(--muted)
}
.intro-grid {
  display:grid;
  grid-template-columns:minmax(0,1fr) 265px;
  gap:55px;
  align-items:end;
  padding-block:72px 50px
}
.eyebrow {
  text-transform:uppercase;
  letter-spacing:.15em;
  font-size:.65rem;
  color:var(--muted);
  font-weight:650;
  margin-block-end:20px
}
.intro-grid h1 {
  font-size:clamp(2.8rem,6vw,4.7rem);
  font-weight:710;
  letter-spacing:-.065em;
  margin-block-end:20px;
  overflow-wrap:anywhere
}
.accent {
  color:var(--accent)
}
.site-tagline {
  max-width:42ch;
  font-size:1.12rem;
  line-height:1.45;
  font-weight:650;
  color:var(--ink);
  margin-block:-4px 12px
}
.site-description {
  max-width:42ch;
  font-size:1.05rem;
  color:var(--muted);
  margin:0
}
.search-form {
  padding-block-end:6px
}
.search-form label {
  display:block;
  font-size:.72rem;
  color:var(--muted);
  margin-block-end:10px
}
.search-input {
  display:flex;
  overflow:hidden;
  border:1px solid #cfd1d8;
  border-radius:8px;
  background:#fff
}
.search-input:focus-within {
  border-color:#9e92f2;
  box-shadow:0 0 0 3px #b9acf933
}
.search-input input {
  min-width:0;
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  padding:10px 12px;
  font-size:.88rem;
  color:var(--ink)
}
.search-input button {
  width:46px;
  flex:none;
  border:0;
  border-inline-start:1px solid var(--line);
  background:#faf9ff;
  color:var(--accent);
  font-size:1.25rem;
  padding:0
}
.search-input button:focus-visible {
  outline-offset:-4px
}
.posts {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:48px
}
.post-card {
  padding-block:32px 34px;
  border-top:1px solid var(--line);
  display:flex;
  flex-direction:column;
  align-items:start
}
.post-meta {
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:.7rem;
  margin-block-end:18px
}
.post-meta a {
  color:var(--accent)
}
.post-card h2 {
  font-size:1.65rem;
  line-height:1.23;
  margin-block-end:16px;
  overflow-wrap:anywhere
}
.post-card h2 a {
  text-decoration:none
}
.excerpt {
  color:var(--muted);
  font-size:.88rem;
  line-height:1.85;
  overflow-wrap:anywhere
}
.read-link {
  font-size:.78rem;
  font-weight:650;
  margin-block-start:auto
}
.read-link span {
  color:var(--accent);
  margin-inline-start:9px
}
.empty-state {
  grid-column:1/-1;
  border-top:1px solid var(--line);
  padding:52px 20px;
  text-align:center;
  color:var(--muted)
}
.empty-state .orbit-mark {
  margin-block-end:18px
}
.pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-block:20px 55px;
  font-size:.85rem
}
.site-footer {
  margin-block-start:auto;
  width:100%;
  border-top:1px solid var(--line);
  padding-block:25px 32px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:18px;
  font-size:.65rem;
  color:var(--muted)
}
.site-footer a {
  color:var(--ink)
}
.entry-wrapper {
  max-width:810px;
  margin-inline:auto;
  padding:70px 42px 65px
}
.entry-header h1 {
  font-size:clamp(2.1rem,5vw,3.4rem);
  line-height:1.15;
  overflow-wrap:anywhere
}
.entry-header {
  margin-block-end:40px
}
.entry-header .post-meta {
  margin-block-end:25px
}
.prose {
  line-height:1.95;
  overflow-wrap:anywhere
}
.prose h1 {
  font-size:2.4rem
}
.prose h2 {
  font-size:1.7rem;
  margin-block:2.2rem 1.1rem
}
.prose h3 {
  font-size:1.3rem;
  margin-block:1.7rem .9rem
}
.prose p,.prose ul {
  margin-block-end:1.3rem
}
.prose a {
  color:var(--accent);
  text-decoration:underline;
  text-underline-offset:3px
}
.prose img {
  display:block;
  border-radius:6px;
  margin-block:20px
}
.prose blockquote {
  margin:30px 0;
  padding:2px 0 2px 24px;
  border-inline-start:3px solid var(--accent);
  font-size:1.1rem;
  color:var(--muted)
}
.prose blockquote p:last-child {
  margin:0
}
.prose code,.prose pre {
  font: .85em/1.8 ui-monospace,SFMono-Regular,Consolas,monospace;
  background:#efedf7;
  border-radius:4px
}
.prose code {
  padding:.15em .4em
}
.prose pre {
  padding:20px;
  overflow:auto
}
.prose pre code {
  padding:0;
  white-space:pre
}
.prose hr {
  border:0;
  border-top:1px solid var(--line);
  margin-block:35px
}
.reading-time {
  font-size:.75rem;
  color:var(--muted);
  margin-block-start:-20px
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  padding-block:30px
}
.tags a {
  font-size:.74rem;
  background:#efedf7;
  color:var(--accent);
  padding:3px 11px;
  border-radius:20px
}
.comments {
  border-top:1px solid var(--line);
  padding-block:32px;
  margin-block-start:15px
}
.comments h2 {
  font-size:1.5rem
}
.comment {
  padding:20px 0;
  border-bottom:1px solid var(--line);
  font-size:.85rem;
  overflow-wrap:anywhere
}
.comment header {
  display:flex;
  justify-content:space-between;
  gap:20px;
  margin-block-end:10px
}
.comment time {
  font-size:.7rem;
  color:var(--muted)
}
.comment p {
  margin:0
}
.comment-link {
  display:inline-block;
  color:var(--accent);
  font-size:.82rem;
  margin-block-start:24px
}
.back-link {
  font-size:.8rem;
  display:inline-block;
  margin-block-start:25px
}
.preview-notice {
  border:1px solid #ddd4ff;
  background:#f0ecff;
  color:#55409a;
  padding:12px 18px;
  border-radius:6px;
  font-size:.8rem;
  margin-block-end:30px
}
.skip-link {
  position:absolute;
  inset-inline-start:20px;
  inset-block-start:-100px;
  background:#fff;
  padding:12px;
  z-index:5
}
.skip-link:focus {
  inset-block-start:15px
}
@media(max-width:750px) {
  :root {
    font-size:16px
  }
  .wrapper {
    padding-inline:25px
  }
  .site-header {
    min-height:82px
  }
  .intro-grid {
    grid-template-columns:1fr;
    gap:24px;
    padding-block:42px 30px
  }
  .search-form {
    max-width:340px
  }
  .posts {
    column-gap:28px
  }
  .post-card h2 {
    font-size:1.4rem
  }
  .entry-wrapper {
    padding:50px 25px
  }
  .site-nav {
    gap:8px 14px
  }
  .site-brand {
    font-size:1.1rem
  }
}
@media(max-width:520px) {
  .site-header {
    flex-direction:column;
    align-items:start;
    gap:10px;
    padding-block:20px
  }
  .site-nav {
    justify-content:start
  }
  .posts {
    grid-template-columns:1fr
  }
  .intro-grid {
    padding-block:32px 24px
  }
  .post-card {
    padding-block:24px
  }
  .empty-state {
    padding-block:38px
  }
  .entry-wrapper {
    padding-block:40px
  }
  .site-footer {
    flex-direction:column;
    gap:6px
  }
  .prose {
    font-size:1rem
  }
  .entry-header {
    margin-block-end:28px
  }
}

/* Clearer visitor actions */
.search-input button {
  width:auto;
  min-width:96px;
  padding:0 14px;
  font-size:.72rem;
  font-weight:700;
  cursor:pointer
}
.comment strong a {
  color:inherit;
  text-decoration:underline;
  text-decoration-color:#d8d4ea;
  text-underline-offset:3px
}
.comment-empty,.comment-note {
  color:var(--muted);
  font-size:.82rem
}
@media(max-width:520px) {
  .search-input {
    align-items:stretch
  }
  .search-input button {
    min-width:92px
  }
}