/* What every blog template shares: the page, its lists of posts, and the text of a post.
   Colour, type and space come from the tokens of the theme. Where the parts of a page stand
   is in the stylesheet of the blog template. */

html,
body {
  margin: 0;
}

.page {
  min-height: 100vh;
  background: var(--x-color-bg, #fff);
  color: var(--x-color-text, #111);
  font-family: var(--x-font-family, system-ui, sans-serif);
}

.page a {
  color: var(--x-color-primary, #2563eb);
  text-underline-offset: 0.15em;
}

.page a:hover {
  color: var(--x-color-primary-hover, #1d4ed8);
}

.page [hidden] {
  display: none;
}

.page .brand {
  color: inherit;
  font-weight: var(--x-font-weight-semibold, 600);
  text-decoration: none;
}

/* A logo is the whole brand: it may hold the name of the blog in a font of its own. It keeps
   to the height of the navbar, and to some of its width on a narrow screen. */

.page .brand picture:not([hidden]) {
  display: flex;
}

.page .brand .logo {
  display: block;
  height: 2rem;
  width: auto;
  max-width: min(14rem, 50vw);
  object-fit: contain;
  object-position: left center;
}

/* The links to the pages of the author stand among the other links, as if nothing held them. */

.page .page-links {
  display: contents;
}

.page .nav-link[aria-current="page"] {
  color: var(--x-color-text, #111);
}

.page .nav-link {
  margin-left: var(--x-space-lg, 1rem);
  color: var(--x-color-text-muted, #666);
  font-size: var(--x-font-size-sm, 0.875rem);
  text-decoration: none;
}

.post,
.entries,
.archive,
.not-found {
  max-width: 42rem;
  padding: calc(var(--x-space-xl, 1.5rem) * 2) 0 calc(var(--x-space-xl, 1.5rem) * 4);
  font-size: var(--x-font-size-lg, 1.125rem);
  line-height: 1.7;
}

/* What a post shows of itself, on its page and in a list. */

.meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--x-space-sm, 0.5rem);
  color: var(--x-color-text-muted, #666);
  font-size: var(--x-font-size-sm, 0.875rem);
}

.meta .date:empty {
  display: none;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x-space-sm, 0.5rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tags a {
  text-decoration: none;
}

.tags a::before {
  content: "#";
}

/* The lists of posts. */

.entries > h1,
.archive > h1,
.not-found > h1 {
  margin: 0 0 var(--x-space-xl, 1.5rem);
  font-size: 2rem;
  line-height: 1.2;
}

.entries > ol,
.archive > ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

.entry {
  margin-bottom: calc(var(--x-space-xl, 1.5rem) * 1.75);
}

.entry h2 {
  margin: 0 0 var(--x-space-xs, 0.25rem);
  font-size: 1.5rem;
  line-height: 1.3;
}

.entry h2 a {
  color: inherit;
  text-decoration: none;
}

.entry h2 a:hover {
  color: var(--x-color-primary, #2563eb);
}

.entry .abstract {
  display: flex;
  align-items: flex-start;
  gap: var(--x-space-md, 0.75rem);
  margin-top: var(--x-space-sm, 0.5rem);
}

/* The picture runs from the top of the capitals of the first line of the summary to the
   baseline of its fourth line, or its third on a narrow screen. A browser without the units
   lh and cap keeps the plain square. */
.entry .thumbnail {
  flex: none;
  width: 6rem;
  height: 6rem;
  width: calc(3lh + 1cap);
  height: calc(3lh + 1cap);
  margin-top: calc((1lh - 1cap) / 2);
  object-fit: cover;
  border-radius: var(--x-radius-md, 0.375rem);
}

.entry .summary {
  margin: 0;
}

@media (max-width: 640px) {
  .entry .thumbnail {
    width: 4.5rem;
    height: 4.5rem;
    width: calc(2lh + 1cap);
    height: calc(2lh + 1cap);
  }
}

.site-footer {
  margin-top: calc(var(--x-space-xl, 1.5rem) * 2);
  padding: var(--x-space-lg, 1rem) var(--x-space-lg, 1rem) var(--x-space-xl, 1.5rem);
  border-top: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  color: var(--x-color-text-muted, #666);
  font-size: var(--x-font-size-sm, 0.875rem);
  text-align: center;
}

.site-footer a {
  color: inherit;
  text-underline-offset: 0.2em;
}

.site-footer a:hover {
  color: var(--x-color-primary, #2563eb);
}

/* The face of a card, which the blog templates with cards share: the first picture of a post,
   and what the card says of it. The card itself is positioned. */
.cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

.cover[hidden] {
  display: none;
}

.card-text {
  padding: var(--x-space-lg, 1rem);
  font-size: var(--x-font-size-base, 1rem);
  line-height: 1.5;
}

.card-text h2 {
  margin: 0 0 var(--x-space-xs, 0.25rem);
  font-size: 1.25rem;
  line-height: 1.3;
}

.card-text h2 a {
  color: inherit;
  text-decoration: none;
}

/* The link of the title covers the card, so a click anywhere on it opens the post. The tags
   lie above it, and stay links of their own. */
.card-text h2 a::after {
  content: "";
  position: absolute;
  inset: 0;
}

.card-text h2 a:hover,
.card-text h2 a:focus-visible {
  color: var(--x-color-primary, #2563eb);
}

.card-text .tags a {
  position: relative;
  z-index: 1;
}

.card-text .summary {
  display: -webkit-box;
  margin: var(--x-space-sm, 0.5rem) 0 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  line-clamp: 3;
}

.entries x-pagination {
  margin-top: calc(var(--x-space-xl, 1.5rem) * 2);
}

.archive-row {
  display: grid;
  grid-template-columns: 4rem 1fr auto auto;
  align-items: baseline;
  gap: var(--x-space-md, 0.75rem);
  padding: var(--x-space-xs, 0.25rem) 0;
}

.archive-row .year {
  font-weight: var(--x-font-weight-semibold, 600);
}

.archive-row .date {
  color: var(--x-color-text-muted, #666);
  font-size: var(--x-font-size-sm, 0.875rem);
}

/* A post. */

.post-header {
  margin-bottom: calc(var(--x-space-xl, 1.5rem) * 1.5);
}

.post-header h1 {
  margin: 0 0 var(--x-space-sm, 0.5rem);
  font-size: 2.5rem;
  font-weight: var(--x-font-weight-bold, 700);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.neighbours {
  display: flex;
  justify-content: space-between;
  gap: var(--x-space-xl, 1.5rem);
  margin-top: calc(var(--x-space-xl, 1.5rem) * 2);
  padding-top: var(--x-space-lg, 1rem);
  border-top: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  font-size: var(--x-font-size-sm, 0.875rem);
}

.neighbours .newer::before {
  content: "\2190\00a0";
}

.neighbours .older {
  margin-left: auto;
  text-align: right;
}

.neighbours .older::after {
  content: "\00a0\2192";
}

.post-blocks > * {
  margin: 0 0 var(--x-space-xl, 1.5rem);
}

.post-blocks h1,
.post-blocks h2,
.post-blocks h3,
.post-blocks h4,
.post-blocks h5,
.post-blocks h6 {
  margin-top: calc(var(--x-space-xl, 1.5rem) * 2);
  margin-bottom: var(--x-space-md, 0.75rem);
  font-weight: var(--x-font-weight-semibold, 600);
  line-height: 1.3;
}

.post-blocks h2 { font-size: 1.75rem; }
.post-blocks h3 { font-size: 1.375rem; }
.post-blocks h4,
.post-blocks h5,
.post-blocks h6 { font-size: 1.125rem; }

.post-blocks code {
  padding: 0.15em 0.35em;
  border-radius: var(--x-radius-sm, 0.375rem);
  border: 1px solid color-mix(in srgb, var(--x-color-text, #000) 16%, transparent);
  background: color-mix(in srgb, var(--x-color-text, #000) 10%, transparent);
  font-family: var(--x-font-family-mono, ui-monospace, monospace);
  font-size: 0.9em;
}

.post-blocks figure {
  margin-left: 0;
  margin-right: 0;
}

.post-blocks x-image {
  display: block;
  border-radius: var(--x-radius-md, 0.75rem);
  overflow: hidden;
}

.post-blocks img {
  max-width: 100%;
  height: auto;
}

.post-blocks blockquote {
  margin-left: 0;
  margin-right: 0;
  padding-left: var(--x-space-xl, 1.5rem);
  border-left: 3px solid var(--x-color-border, #d0d7de);
  color: var(--x-color-text-muted, #666);
}

.post-blocks blockquote > :last-child,
.post-blocks li > :last-child {
  margin-bottom: 0;
}

.post-blocks ul,
.post-blocks ol {
  padding-left: var(--x-space-xl, 1.5rem);
}

.post-blocks li {
  margin-bottom: var(--x-space-xs, 0.25rem);
}

.post-blocks li > p {
  margin: 0 0 var(--x-space-sm, 0.5rem);
}

.post-blocks li > ul,
.post-blocks li > ol {
  margin: var(--x-space-xs, 0.25rem) 0 0;
}

.post-blocks hr {
  width: 30%;
  margin: calc(var(--x-space-xl, 1.5rem) * 2) auto;
  border: 0;
  border-top: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
}

.post-blocks x-code,
.post-blocks x-table {
  font-size: var(--x-font-size-sm, 0.875rem);
}

.post-blocks sup a {
  padding: 0 0.15em;
  text-decoration: none;
}

.footnotes {
  padding-top: var(--x-space-lg, 1rem);
  border-top: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  color: var(--x-color-text-muted, #666);
  font-size: var(--x-font-size-sm, 0.875rem);
}

.footnotes li > p {
  display: inline;
}

.note-back {
  margin-left: 0.35em;
  text-decoration: none;
}

.empty {
  color: var(--x-color-text-muted, #666);
}

/* What the reader chooses: the search, the theme, a tag. */

.page .actions {
  display: flex;
  align-items: center;
  gap: var(--x-space-md, 0.75rem);
}

.page .actions x-search-field {
  width: 14rem;
  max-width: 40vw;
}

.tag-choices {
  display: flex;
  flex-wrap: wrap;
  gap: var(--x-space-sm, 0.5rem);
  margin: 0 0 calc(var(--x-space-xl, 1.5rem) * 1.5);
  padding: 0;
  list-style: none;
}

.tag-choices:empty {
  display: none;
}

.tag-choices button,
.entries .clear,
.sidebar .clear {
  padding: 0.15rem 0.6rem;
  border: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  border-radius: var(--x-radius-full, 9999px);
  background: transparent;
  color: var(--x-color-text-muted, #666);
  font: inherit;
  font-size: var(--x-font-size-sm, 0.875rem);
  cursor: pointer;
}

.tag-choices button[aria-pressed="true"] {
  border-color: var(--x-color-primary, #2563eb);
  background: var(--x-color-primary, #2563eb);
  color: var(--x-color-bg, #fff);
}

.entries .heading {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--x-space-md, 0.75rem);
  margin-bottom: var(--x-space-xl, 1.5rem);
}

.entries .heading h1 {
  margin: 0;
  font-size: 2rem;
  line-height: 1.2;
}

/* The menu. Below 641 pixels, which is `wide-from` in the app, the navbar shows its brand and
   the button that opens the menu. */

.page .menu-button,
.page .menu-close {
  padding: 0.25rem 0.6rem;
  border: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  border-radius: var(--x-radius-sm, 0.375rem);
  background: transparent;
  color: var(--x-color-text, #111);
  font: inherit;
  cursor: pointer;
}

@media (min-width: 641px) {
  .page .menu-button {
    display: none;
  }
}

.menu-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: var(--x-font-weight-semibold, 600);
}

.menu {
  display: flex;
  flex-direction: column;
  gap: var(--x-space-lg, 1rem);
}

.page .menu .nav-link {
  margin-left: 0;
  font-size: var(--x-font-size-base, 1rem);
}

/* The blurred backdrop behind a page of the author. */

.standalone-backdrop {
  --x-gaussian-blur-border-radius: var(--x-radius-lg, 1rem);
  margin: var(--x-space-xl, 1.5rem) 0;
}

.standalone-backdrop::part(backdrop) {
  top: 20%;
}

.standalone-backdrop .post {
  padding-left: calc(var(--x-space-xl, 1.5rem) * 1.5);
  padding-right: calc(var(--x-space-xl, 1.5rem) * 1.5);
}

/* A live block: the frame that runs the code, above the code, in one panel. */

.live {
  overflow: hidden;
  border: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
  border-radius: var(--x-radius-md, 8px);
}

.live-frame {
  display: block;
  width: 100%;
  height: 120px;
  border: 0;
}

.live x-code {
  --x-code-radius: 0;
  --x-code-border: transparent;
  display: block;
  border-top: var(--x-border-width, 1px) solid var(--x-color-border, #d0d7de);
}