:root {
  color-scheme:light;
  --bg:hsl(40 23% 97%);
  --fg:hsl(222 32% 17%);
  --muted:hsl(218 15% 39%);
  --line:hsl(220 18% 84%);
  --card:#fff;
  --link:hsl(221 57% 39%);
}
:root.dark {
  color-scheme:dark;
  --bg:#151b27;
  --fg:#eef1f7;
  --muted:#b6c0d3;
  --line:#3e4960;
  --card:#202838;
  --link:#acc5ff;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--fg);
  font-family:"DM Sans",Inter,system-ui,sans-serif;
  line-height:1.65;
}
a {
  color:var(--link);
  text-underline-offset:.2em;
}
a:hover {
  text-decoration-thickness:2px;
}
a,button {
  -webkit-tap-highlight-color:transparent;
}
a:focus-visible,button:focus-visible {
  outline:3px solid var(--link);
  outline-offset:5px;
}
button {
  font:inherit;
  background:var(--card);
  color:var(--fg);
  border:1px solid var(--line);
  border-radius:.5rem;
  padding:.5rem .8rem;
  cursor:pointer;
  min-height:44px;
}
button:hover {
  background:var(--bg);
}
[hidden] {
  display:none!important;
}
.skip {
  position:absolute;
  left:1rem;
  top:-8rem;
  padding:1rem;
  background:var(--card);
  z-index:2;
}
.skip:focus {
  top:1rem;
}
.site-header {
  background:var(--card);
  border-bottom:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  padding:.75rem max(1rem,calc((100vw - 1240px)/2));
}
.site-header img {
  display:block;
  object-fit:contain;
  background:#fff;
  border-radius:4px;
}
.site-header nav,.header-actions {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.5rem;
}
.site-header a {
  text-decoration:none;
  font-weight:500;
}
.site-header nav a {
  color:var(--muted);
  padding:.6rem 0;
}
.site-header [aria-current] {
  color:var(--link);
}
main {
  max-width:780px;
  margin:0 auto;
  padding:3rem 1.5rem 5rem;
  min-height:65vh;
}
h1,h2,h3 {
  font-family:Fraunces,Georgia,serif;
  line-height:1.18;
  letter-spacing:-.02em;
}
h1 {
  font-size:clamp(2rem,5vw,3rem);
  font-weight:600;
  margin:1rem 0;
}
h2 {
  font-size:1.75rem;
  margin:2.25rem 0 1rem;
}
h3 {
  font-size:1.35rem;
  margin:1.75rem 0 .75rem;
}
.back {
  display:inline-block;
  margin-bottom:1rem;
}
.byline {
  color:var(--muted);
  font-size:.9rem;
}
.article-header {
  margin-bottom:2rem;
}
.tags {
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  list-style:none;
  padding:0;
  font-size:.8rem;
}
.tags li {
  border:1px solid var(--line);
  border-radius:2rem;
  padding:.2rem .65rem;
  color:var(--muted);
}
.cover,.prose img {
  display:block;
  max-width:100%;
  height:auto;
  border-radius:.65rem;
  margin:2rem 0;
}
.cover {
  width:100%;
}
.prose {
  font-size:1.125rem;
  line-height:1.85;
  overflow-wrap:break-word;
}
.prose p {
  margin:1.2em 0;
}
.prose blockquote {
  border-left:3px solid var(--link);
  margin:1.5rem 0;
  padding:.1rem 1.25rem;
  color:var(--muted);
}
.prose pre {
  overflow:auto;
}
.listing-header {
  margin-bottom:2rem;
}
.article-list article {
  padding:1.5rem 0 2rem;
  border-top:1px solid var(--line);
}
.article-list h2 {
  margin:.6rem 0 1rem;
}
.article-list h2 a {
  text-decoration:none;
}
.article-list h2 a:hover {
  text-decoration:underline;
}
.article-list p {
  margin:.5rem 0;
}
footer {
  border-top:1px solid var(--line);
  padding:2rem 1.5rem;
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:1rem 2rem;
  font-size:.875rem;
  background:var(--card);
}
footer span {
  color:var(--muted);
}
#privacy-notice {
  position:sticky;
  bottom:0;
  border-top:1px solid var(--line);
  background:var(--card);
  padding:1rem max(1rem,calc((100vw - 1240px)/2));
  padding-bottom:max(1rem,env(safe-area-inset-bottom));
  display:flex;
  align-items:center;
  gap:1rem;
  font-size:.875rem;
  box-shadow:0 -2px 12px #0000000f;
}
#privacy-notice p {
  flex:1;
  margin:0;
}
#privacy-notice button {
  flex-shrink:0;
}
@media(max-width:650px) {
  .site-header {
    flex-wrap:wrap;
    gap:.5rem 1rem;
  }
  .site-header img {
    width:72px;
    height:54px;
  }
  .site-header nav {
    gap:1rem;
    order:3;
    width:100%;
    justify-content:center;
  }
  .header-actions {
    gap:.75rem;
    font-size:.875rem;
  }
  main {
    padding:2rem 1.25rem 3rem;
  }
  .prose {
    font-size:1.0625rem;
  }
  .tags {
    gap:.4rem;
  }
  #privacy-notice {
    flex-wrap:wrap;
  }
  #privacy-notice p {
    flex-basis:100%;
  }
  #privacy-notice button {
    margin-left:auto;
  }
}

.article-next {
  margin-top:3rem;
  padding:clamp(1.25rem,4vw,2rem);
  border:1px solid var(--line);
  border-radius:1rem;
  background:var(--card);
}
.article-next h2 {
  margin:0;
  font-family:"Fraunces",Georgia,serif;
  font-size:1.5rem;
}
.article-next p {
  margin:.75rem 0 1.25rem;
  color:var(--muted);
}
.article-next nav {
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:.75rem 1.5rem;
}
.article-next nav a {
  display:inline-flex;
  align-items:center;
  min-height:44px;
}
.article-next-primary {
  padding:.65rem 1rem;
  border-radius:.5rem;
  background:var(--link);
  color:var(--card);
  font-weight:600;
  text-decoration:none;
}