:root {
  --primary: blue;
  --secondary: #ddd;
  --background: #fefefe;
  --gr: 1.61803398875;
  --gr-rem: calc(var(--gr) * 1rem);
  --gr-em: calc(var(--gr) * 1em);
}

a {
  color: currentColor;
}

* {
  box-sizing: border-box;
}

body {
  font-family: Recursive, sans-serif;
  font-variation-settings: "MONO" .2, "CASL" 0, "wght" 350, "slnt" 0, "CRSV" 0;
  margin: var(--gr-rem)
}

h1,
h2,
strong,
body > header em {
  font-variation-settings: "MONO" .2, "CASL" 0, "wght" 600, "slnt" 0, "CRSV" 0;
}

body > header {
  margin-bottom: calc(var(--gr-rem) / 2);
}

body > header em {
  font-size: var(--gr-rem);
}

img {
  display: block;
  max-width: 100%;
}

article {
  border: 1px solid black;
  border-top: 0;
  padding: var(--gr-rem);
  padding-top: 0;
  margin: var(--gr-rem) 0;
  margin-top: 0;
  content-visibility: auto;
}

article footer {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  font-size: 0.8em;
  margin-top: var(--gr-rem);
}

article footer share-button,
article footer a {
  flex: 1;
  text-align: center;
  cursor: pointer;
}

article footer share-button {
  margin-right: var(--gr-rem);
}

article footer a {
  display: block;
  padding: var(--gr-rem);
  border: 1px solid black;
}

details {
  transition: margin 200ms ease;
}

details summary {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  height: 64px;
  content-visibility: auto;
  overflow: hidden;
  border-bottom: 1px solid black;
  padding: 0;
  transition: all 200ms ease;
  outline: none;
  user-select: none;
}

details summary strong {
  transition: font-size 200ms ease;
}

details summary strong {
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

details[open] summary strong {
  white-space: break-spaces;
}

details:not([open]) summary intl-date {
  display: none;
}

details:not([open]) summary details-close-button {
  display: none;
}

details[open] summary {
  padding: var(--gr-rem);
  height: 88px;
  border-bottom: 0;
  border-top: 1px solid black;
  border-left: 1px solid black;
  border-right: 1px solid black;
}

details[open] {
  margin-top: var(--gr-rem);
}

details summary small svg {
  transform: translateY(2px);
}

details summary small > *:not(:first-child)::before {
  content: " / ";
}

details[open] summary small > *:not(:first-child)::before {
  content: " • ";
}

details summary .author,
details summary .author::before {
  display: none;
}

details[open] summary .author,
details[open] summary .author::before {
  display: inline;
}

details[open] summary figure {
  display: none;
}

details[open] summary relative-time {
  display: none;
}

details:not([open]) summary:hover {
  background-color: #eee;
}

details summary figure {
  margin: 0;
  width: 48px;
  height: 48px;
  margin-left: calc(var(--gr-rem) / 2);
  content-visibility: auto;
}

details summary .col:first-child {
  flex: 1;
}

details summary .col {
  display: flex;
  flex-flow: column nowrap;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

details summary figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  content-visibility: auto;
  border-radius: calc(var(--gr-rem) / 4);
}

details ::marker,
details summary::-webkit-details-marker {
  display: none;
}