@view-transition {
  navigation: auto;
}
@font-face {
  font-family: "Apfel Grotezk";
  font-style: normal;
  font-weight: bold;
  src: url('fonts/ApfelGrotezk-Fett.woff2') format('woff2'), url('fonts/ApfelGrotezk-Fett.woff') format('woff');
}
@font-face {
  font-family: "Apfel Grotezk";
  font-style: normal;
  font-weight: normal;
  src: url('fonts/ApfelGrotezk-Regular.woff2') format('woff2'), url('fonts/ApfelGrotezk-Regular.woff') format('woff');
}
/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box;
}
/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}
/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */
ul[role="list"],
ol[role="list"] {
  list-style: none;
}
/* Set core root defaults */
html:focus-within {
  scroll-behavior: smooth;
}
/* Set core body defaults */
body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
}
/* A elements that don't have a class get default styles */
a:not([class]) {
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
}
/* Make images easier to work with */
img,
picture {
  max-width: 100%;
  display: block;
}
/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}
/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  html:focus-within {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
img {
  height: auto;
}
h1,
h2 {
  text-wrap: balance;
}
:root {
  color-scheme: light dark;
  --primary-color: #3b692f;
  --primary-color-10: #4f8c3f;
  --secondary-color: #8453ee;
  --secondary-color-20: rgba(132, 83, 238, 0.2);
  --secondary-color-40: rgba(132, 83, 238, 0.4);
  --other-color: #ea92d6;
  --background-color: #fffdf4;
  --text-color: #333;
  --text-color-60: rgba(51, 51, 51, 0.6);
  --faded-bg-color: rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary-color: #9484fe;
    --primary-color-10: #c0b7fe;
    --secondary-color: #40a326;
    --secondary-color-20: rgba(64, 163, 38, 0.2);
    --secondary-color-40: rgba(64, 163, 38, 0.4);
    --other-color: #ea92d6;
    --background-color: #202730;
    --text-color: #ccc;
    --text-color-60: rgba(204, 204, 204, 0.6);
    --faded-bg-color: rgba(200, 200, 200, 0.05);
  }
}
:root[data-theme="light"] {
  --primary-color: #3b692f;
  --primary-color-10: #4f8c3f;
  --secondary-color: #8453ee;
  --secondary-color-20: rgba(132, 83, 238, 0.2);
  --secondary-color-40: rgba(132, 83, 238, 0.4);
  --other-color: #ea92d6;
  --background-color: #fffdf4;
  --text-color: #333;
  --text-color-60: rgba(51, 51, 51, 0.6);
  --faded-bg-color: rgba(0, 0, 0, 0.05);
}
:root[data-theme="dark"] {
  --primary-color: #9484fe;
  --primary-color-10: #c0b7fe;
  --secondary-color: #40a326;
  --secondary-color-20: rgba(64, 163, 38, 0.2);
  --secondary-color-40: rgba(64, 163, 38, 0.4);
  --other-color: #ea92d6;
  --background-color: #202730;
  --text-color: #ccc;
  --text-color-60: rgba(204, 204, 204, 0.6);
  --faded-bg-color: rgba(200, 200, 200, 0.05);
}
body {
  font-family: "Apfel Grotezk", Helvetica, sans-serif;
}
body[data-layout] {
  background: var(--background-color);
  color: var(--text-color);
}
::-moz-selection {
  background: #fc0;
  color: #333;
}
::selection {
  background: #fc0;
  color: #333;
}
h1,
h2,
h3,
h4 {
  font-family: "Apfel Grotezk", Helvetica, sans-serif;
}
.sr-only {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.debug .textblock {
  background: rgba(200, 0, 0, 0.1);
}
.article {
  font-size: 1.125rem;
  color: var(--text-color);
}
@media only screen and (min-width: 700px) {
  .article {
    font-size: 1.4375rem;
  }
}
.article .articletitle,
.article .magazinetitle {
  color: var(--primary-color);
}
.article .articleheader + *,
.article .magazineheader + * {
  -webkit-margin-before: 3rem !important;
          margin-block-start: 3rem !important;
}
@media (min-width: 600px) {
  .article .magazineheader + .doors {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  }
}
/* PrismJS 1.29.0
https://prismjs.com/download.html?#themes=prism-tomorrow&languages=markup+css+clike+javascript+aspnet+bash+csharp+coffeescript+css-extras+gherkin+git+json+less+markdown+powershell+jsx+ruby+sass+scss+sql+swift+typescript+yaml */
/**
 * prism.js tomorrow night eighties for JavaScript, CoffeeScript, CSS and HTML
 * Based on https://github.com/chriskempson/tomorrow-theme
 * @author Rose Pritchard
 */
code[class*="language-"],
pre[class*="language-"] {
  color: #ccc;
  background: none;
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 1em;
  text-align: left;
  white-space: pre;
  word-spacing: normal;
  word-break: normal;
  word-wrap: normal;
  line-height: 1.5;
  -moz-tab-size: 4;
  -o-tab-size: 4;
  tab-size: 4;
  -webkit-hyphens: none;
  hyphens: none;
}
/* Code blocks */
pre[class*="language-"] {
  padding: 1em;
  margin: 0.5em 0;
  overflow: auto;
}
:not(pre) > code[class*="language-"],
pre[class*="language-"] {
  background: #2d2d2d;
}
/* Inline code */
:not(pre) > code[class*="language-"] {
  padding: 0.1em;
  border-radius: 0.3em;
  white-space: normal;
}
.token.comment,
.token.block-comment,
.token.prolog,
.token.doctype,
.token.cdata {
  color: #999;
}
.token.punctuation {
  color: #ccc;
}
.token.tag,
.token.attr-name,
.token.namespace,
.token.deleted {
  color: #e2777a;
}
.token.function-name {
  color: #6196cc;
}
.token.boolean,
.token.number,
.token.function {
  color: #f08d49;
}
.token.property,
.token.class-name,
.token.constant,
.token.symbol {
  color: #f8c555;
}
.token.selector,
.token.important,
.token.atrule,
.token.keyword,
.token.builtin {
  color: #cc99cd;
}
.token.string,
.token.char,
.token.attr-value,
.token.regex,
.token.variable {
  color: #7ec699;
}
.token.operator,
.token.entity,
.token.url {
  color: #67cdcc;
}
.token.important,
.token.bold {
  font-weight: bold;
}
.token.italic {
  font-style: italic;
}
.token.entity {
  cursor: help;
}
.token.inserted {
  color: green;
}
.codesnippet {
  font-size: 1rem;
  margin-block: 7vw !important;
}
.codesnippet p.caption,
.codesnippet p.snippet-caption,
.codesnippet pre[class*=language-],
.codesnippet pre[class*=language-] + p {
  padding-left: 5em;
}
@media (max-width: 699px) {
  .codesnippet pre[class*=language-] {
    font-size: 0.8rem;
  }
}
@media (min-width: 700px) {
  .codesnippet {
    display: grid;
    grid-template-columns: subgrid;
    grid-template-rows: auto 0;
    background: #2d2d2d;
  }
  .codesnippet > * {
    -webkit-padding-start: 2rem !important;
            padding-inline-start: 2rem !important;
    grid-area: wrapper;
    grid-row: 1;
  }
  .codesnippet > .caption,
  .codesnippet > .snippet-caption,
  .codesnippet > pre[class*=language-] + p {
    grid-row: 2;
    padding-block: 6px;
  }
}
.text {
  line-height: 1.5;
}
.text > * + * {
  -webkit-margin-before: 1.5rem;
          margin-block-start: 1.5rem;
}
.text :is(h2, h3, h4) {
  -webkit-margin-before: 2em;
          margin-block-start: 2em;
}
.text :is(h2, h3, h4) + * {
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.text h2 {
  font-size: 1.5em;
}
.text h3 {
  font-size: 1.3em;
}
.text code,
.text span.code {
  font-family: Monospace;
  color: var(--text-color);
  font-weight: bold;
  background: var(--secondary-color-20);
  padding: 2px;
  border-radius: 2px;
  word-wrap: break-word;
}
.text ul,
.text ol {
  margin-block: 3rem;
  padding-inline: 1.6em;
}
.text ul li::marker,
.text ol li::marker {
  color: var(--text-color);
}
.text ul li + li,
.text ol li + li {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}
.text ul {
  list-style-type: square;
  -webkit-padding-start: 3em;
          padding-inline-start: 3em;
  -webkit-padding-end: 2em;
          padding-inline-end: 2em;
}
.text ol {
  list-style-type: decimal-leading-zero;
}
.text ol li {
  -webkit-padding-start: 3em;
          padding-inline-start: 3em;
}
.text ol li::marker {
  font-variant-numeric: tabular-nums;
}
.text a {
  color: var(--secondary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.text blockquote {
  padding-inline: 4rem 2rem;
  -webkit-border-start: 2px solid var(--secondary-color);
          border-inline-start: 2px solid var(--secondary-color);
}
.door {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  font-size: 1.1875rem;
  line-height: 1.08;
  padding: 1.875rem;
  border: 1px solid var(--text-color);
  color: var(--primary-color);
}
.door:not(.closed):hover,
.door:not(.closed):has(a:focus) {
  background: var(--faded-bg-color);
}
.door time {
  font-size: 3.0625rem;
  font-weight: bold;
}
.door h2 {
  font-weight: normal;
  color: var(--primary-color);
}
.door h2 a {
  color: inherit;
  text-decoration: none;
}
.door h2 a:hover,
.door h2 a:focus {
  text-decoration: underline;
}
.door h2 a::before {
  content: "";
  display: block;
  position: absolute;
  inset: 0;
}
.door .byline {
  -webkit-margin-before: auto;
          margin-block-start: auto;
  color: var(--secondary-color);
}
.door.closed {
  display: inline-flex;
  place-content: center;
  place-items: center;
  color: var(--secondary-color-40);
  cursor: pointer;
}
.door.closed time {
  font-size: 2.9375rem;
  display: flex;
  place-items: center;
  place-content: center;
  inline-size: 12.1875rem;
  aspect-ratio: 1;
  border: 1px dashed var(--secondary-color);
}
:not(.today) > .door.magazine::before {
  font-size: 1rem;
  content: "Magazine";
  background: var(--other-color);
  color: #333;
  text-transform: uppercase;
  align-self: flex-end;
  padding-inline: 1em;
  padding-block: 0.3em;
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
}
@media screen and (min-width: 600px) {
  .door {
    font-size: 2.1875rem;
  }
  .door.closed time {
    font-size: 4.9375rem;
  }
}
.linkbutton {
  font-size: 1.4375rem;
  line-height: 1.2173913;
  transition: 300ms ease-in-out;
  display: inline-block;
  text-decoration: none;
  color: var(--secondary-color);
}
.linkbutton:hover,
.linkbutton:focus {
  color: var(--primary-color);
}
@media only screen and (min-width: 700px) {
  .linkbutton {
    border: 1px solid;
    padding: 0 1.5rem;
    border-radius: 1.5rem;
  }
}
.buttonbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
  gap: 0.6em 1.875rem;
  list-style: none;
  padding: 0 1em;
}
.buttonbar li a {
  font-size: 1.4375rem;
  line-height: 1.2173913;
  transition: 300ms ease-in-out;
  display: inline-block;
  text-decoration: none;
  color: var(--secondary-color);
}
.buttonbar li a:hover,
.buttonbar li a:focus {
  color: var(--primary-color);
}
.buttonbar li a:hover,
.buttonbar li a:focus {
  color: var(--primary-color);
}
@media only screen and (min-width: 700px) {
  .buttonbar li a {
    border: 1px solid;
    padding: 0 1.5rem;
    border-radius: 1.5rem;
  }
}
.yearnavigation {
  font-size: 1.4375rem;
}
.yearnavigation ul {
  padding: 0;
}
.yearnavigation li a {
  color: inherit;
  text-decoration: none;
  display: block;
  padding: 0.5em 0;
}
.yearnavigation li a[aria-current="true"] {
  font-weight: bold;
}
.mediablock {
  position: relative;
}
.mediablock picture,
.mediablock img,
.mediablock video {
  inline-size: 100%;
  block-size: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.mediablock.noscale {
  display: inline-flex;
}
.mediablock.noscale picture,
.mediablock.noscale img,
.mediablock.noscale video {
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  -o-object-fit: initial;
     object-fit: initial;
}
.mediablock.empty {
  width: 100%;
  aspect-ratio: 1;
}
.mediablock.mirror img,
.mediablock.mirror video {
  transform: scaleX(-1);
}
.articletitle,
.magazinetitle {
  font-size: 2.8125rem;
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.25rem) * 2.0192)), 2.8125rem);
  line-height: 1.08;
  display: grid;
}
.articletitle h1,
.magazinetitle h1 {
  grid-row: 2;
  color: var(--primary-color);
}
.articletitle .byline,
.articletitle .categorization,
.magazinetitle .byline {
  grid-row: 1;
  color: var(--secondary-color);
  align-self: baseline;
}
.articletitle .byline a,
.articletitle .categorization a {
  color: inherit;
  text-decoration: none;
}
.articletitle .byline a:hover,
.articletitle .categorization a:hover,
.articletitle .byline a:focus,
.articletitle .categorization a:focus {
  text-decoration: underline;
}
.articletitle .byline,
.magazinetitle .byline {
  font-size: 1.5625rem;
}
.articletitle .categorization {
  grid-row: 3;
  font-size: 1rem;
}
.articletitle .tagged {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;
  -webkit-padding-before: 1em;
          padding-block-start: 1em;
}
.homelink {
  font-family: "Apfel Grotezk", Helvetica, sans-serif;
  color: var(--primary-color);
  font-size: 3.0625rem;
  font-weight: bold;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding-inline: 0.5em;
}
.homelink a {
  color: inherit;
  text-decoration: none;
}
.authorinfo {
  padding: 1.75rem 1.25rem;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.375rem;
  border: 1px solid var(--text-color);
}
.authorinfo .author-name {
  font-size: 1.5625rem;
  color: var(--text-color);
}
.authorinfo .author-name strong {
  font-weight: normal;
}
.authorinfo .author-contact {
  color: var(--secondary-color);
}
.authorinfo .author-contact dd {
  display: flex;
  align-items: center;
  gap: 10px;
}
.authorinfo .author-contact [data-network]::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 22px;
  color: inherit;
  background-size: 100%;
  background-repeat: no-repeat;
}
.authorinfo .author-contact [data-network="github"]::before {
  background-image: url(github.svg);
}
.authorinfo .author-contact [data-network="linkedin"]::before {
  background-image: url(linkedin.svg);
}
.authorinfo .author-contact [data-network="twitter"]::before {
  background-image: url(twitterx.svg);
}
.authorinfo .author-contact [data-network="mastodon"]::before {
  background-image: url(mastodon.svg);
}
.authorinfo .author-contact [data-network="discord"]::before {
  background-image: url(discord.svg);
}
.authorinfo .author-contact [data-network="bluesky"]::before {
  background-image: url(bluesky.svg);
}
.authorinfo .author-contact [data-network="umbfyi"]::before {
  background-image: url(umbfyi.svg);
}
.authorinfo .author-contact a {
  color: inherit;
}
.authorinfo .avatar {
  flex: none;
  width: 96px;
  height: 96px;
  border: 1px solid var(--text-color);
  border-radius: 14px;
  overflow: hidden;
}
.image {
  -webkit-margin-before: 5rem !important;
          margin-block-start: 5rem !important;
}
.image .mediablock + p,
.image .mediablock + .caption {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
  font-size: 1rem;
  color: var(--primary-color);
}
.image.at-start {
  text-align: start;
}
.image.at-center {
  text-align: center;
}
.image.at-end {
  text-align: end;
}
.note {
  -webkit-margin-before: 4rem !important;
          margin-block-start: 4rem !important;
  border: 2px solid;
}
.note header {
  background: rgba(0, 0, 0, 0.1);
  padding: 0 2rem;
}
.note.warning header {
  background: rgba(200, 0, 0, 0.6);
}
.note.tip header {
  background: rgba(0, 0, 200, 0.2);
}
.note .text {
  padding: 1rem 2rem;
}
.bonuscontent {
  border: 1px solid #333;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 6rem 2rem;
}
.doors + .bonuscontent {
  -webkit-border-before: none;
          border-block-start: none;
}
.bonuscontent .text {
  font-size: 2.1875rem;
  max-width: 40ch;
}
.bonuscontent h2 {
  font-size: 3.875rem;
  line-height: 1.06451613;
  color: var(--primary-color);
  -webkit-margin-before: 0;
          margin-block-start: 0;
}
.today {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  color: var(--primary-color);
}
.today .door {
  flex: 1;
}
.today .door::before {
  content: "Today’s article";
  display: block;
  font-size: 1.3125rem;
  color: var(--text-color);
  font-weight: bold;
  -webkit-margin-before: -0.5em;
          margin-block-start: -0.5em;
}
.today .door.magazine::before {
  content: "Today’s magazine";
}
.intro .today .door {
  border-inline: none;
  -webkit-border-after: none;
          border-block-end: none;
}
.the-end .door:hover,
.the-end .door:focus {
  background: transparent;
}
.intro .the-end .door {
  border-inline: none;
  -webkit-border-after: none;
          border-block-end: none;
}
.themepicker {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
  margin-block: 1em;
  color: var(--primary-color-10);
}
.themepicker theme-picker {
  transition: 300ms ease-in-out;
  border: 1px solid;
  border-radius: 16px;
  padding-inline: 8px;
  padding-block: 2px;
  cursor: pointer;
}
.themepicker theme-picker::before {
  display: inline-block;
}
.themepicker theme-picker[current="light"]::before {
  content: '🌻' ' ' attr(current);
}
.themepicker theme-picker[current="dark"]::before {
  content: '🌙' ' ' attr(current);
}
.themepicker theme-picker[current="auto"]::before {
  content: '💻' ' ' attr(current);
}
.themepicker theme-picker:hover,
.themepicker theme-picker:focus {
  background: rgba(255, 204, 0, 0.6);
  color: #333;
}
.tagcloud {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1rem;
  font-size: 1.5rem;
}
.tagcloud:has([aria-current="true"]) a {
  opacity: 0.5;
}
.tagcloud a {
  text-decoration: none;
}
.tagcloud a:hover,
.tagcloud a:focus {
  text-decoration: underline;
}
.tagcloud a[aria-current="true"] {
  color: var(--secondary-color);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 4px;
  opacity: 1;
}
.articlelist h3 {
  color: var(--secondary-color);
}
.articlelist ul + h3 {
  -webkit-margin-before: 1em;
          margin-block-start: 1em;
}
.articlelist ul {
  list-style: none;
  padding-inline: 1em;
  margin-block: 0;
}
.articlelist a {
  color: var(--primary-color);
}
.text table {
  border-collapse: collapse;
}
.text table,
.text table td,
.text table th {
  border: 1px solid var(--text-color-60);
}
.text table th,
.text table td {
  text-align: left;
  text-align: start;
  padding-inline: 0.5em;
  padding-block: 0.8em;
}
.text table tr:nth-child(even) {
  background: var(--faded-bg-color);
}
.doors {
  border: 1px solid var(--text-color);
  border-style: solid none none solid;
}
@media screen and (min-width: 600px) {
  .doors {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
}
.doors + .doors {
  border-top: none;
}
.doors > .door {
  border-style: none solid solid none;
}
.doors > .door time {
  max-inline-size: 100%;
}
.doors.one {
  grid-template-columns: repeat(9, minmax(0, auto));
  grid-auto-rows: -webkit-min-content;
  grid-auto-rows: min-content;
}
.doors.one > * {
  grid-column: span 2;
}
.doors.one > *:first-child {
  grid-column: span 3;
  grid-row: span 2;
}
.doors.two {
  grid-template-columns: repeat(6, minmax(0, auto));
}
.doors.two > *:nth-child(1),
.doors.two > *:nth-child(2) {
  grid-column: span 2;
  grid-row: span 2;
}
.doors.four {
  grid-template-columns: repeat(4, minmax(0, auto));
}
.doors.five {
  grid-template-columns: repeat(5, minmax(0, auto));
}
.doors.six {
  grid-template-columns: repeat(6, minmax(0, auto));
}
.doors.seven {
  grid-template-columns: repeat(7, minmax(0, auto));
}
.doors.one-closed {
  grid-template-columns: repeat(1, minmax(0, auto));
}
.doors.two-closed {
  grid-template-columns: repeat(2, minmax(0, auto));
}
.doors.three-closed {
  grid-template-columns: repeat(3, minmax(0, auto));
}
.articleheader .teaser,
.magazineheader .teaser {
  color: var(--text-color);
  font-size: 2.1875rem;
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.25rem) * 2.0192)), 2.8125rem);
  line-height: 1.0857;
}
.articleheader .teaser::before,
.magazineheader .teaser::before {
  content: "";
  display: block;
  inline-size: 7ch;
  block-size: 0;
  -webkit-border-before: 1px solid;
          border-block-start: 1px solid;
  margin-block: 5vw;
}
.magazineheader .magazinetitle {
  text-align: center;
}
.magazineheader .teaser {
  font-size: 1.1875rem;
  font-size: clamp(1.5rem, calc(1.5rem + ((1vw - 0.25rem) * 2.0192)), 1.8125rem);
  line-height: 1.0857;
}
.magazineheader .teaser::before {
  margin-inline: auto;
  margin-block: 3vw;
}
.topbar {
  display: flex;
  justify-content: space-between;
  -webkit-padding-end: 2.625rem;
          padding-inline-end: 2.625rem;
  -webkit-border-after: 1px solid var(--text-color);
          border-block-end: 1px solid var(--text-color);
  gap: 1rem;
}
.topbar .buttonbar {
  -webkit-margin-start: auto;
          margin-inline-start: auto;
}
.topbar .homelink {
  -webkit-border-end: 1px solid var(--text-color);
          border-inline-end: 1px solid var(--text-color);
}
@media (max-width: 699px) {
  .topbar .themepicker {
    order: 1;
    align-self: last-baseline;
  }
  .topbar .themepicker theme-picker {
    border: none;
  }
}
.authors {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-block: 6rem !important;
  border: 1px solid var(--text-color);
  border-style: solid none none solid;
}
.authors > * {
  flex-grow: 1;
  flex-basis: calc((30rem - 100%) * 999);
}
.authors > :nth-last-child(n+4),
.authors > :nth-last-child(n+4) ~ * {
  flex-basis: 100%;
}
.authors .authorinfo {
  border-style: none solid solid none;
}
.artworkgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
}
.artworkgrid a img {
  position: relative;
  transition: 230ms ease-in-out;
  transition-property: transform;
  transform: scale(1);
}
.artworkgrid a:not(:target):hover img,
.artworkgrid a:not(:target):focus img {
  transform: scale(0.96);
}
@supports (display: grid) {
  .artworkgrid {
    grid-column: 2 / -1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  }
  .artworkgrid a:target {
    position: relative;
    grid-column: 1 / -1;
  }
  .artworkgrid a:target img {
    inline-size: 100%;
  }
  .artworkgrid a:target:not([data-description = ''])::after {
    display: block;
    content: attr(data-description);
    font-size: 1.5rem;
    background: rgba(0, 0, 0, 0.7);
    color: #ccc;
    padding: 1em;
    position: absolute;
    inset-block-end: 20px;
    inset-inline: 20px;
    border-radius: 8px;
  }
  .artworkgrid:has(a:target) a:not(:target) {
    display: none;
  }
}
.umbracoform {
  accent-color: var(--secondary-color);
  max-inline-size: 60ch;
  padding-block: 1rem 5rem;
}
.umbracoform .umbraco-forms-page > * + *,
.umbracoform .umbraco-forms-container > * + * {
  -webkit-margin-before: 1.6em;
          margin-block-start: 1.6em;
}
.umbracoform .umbraco-forms-label {
  display: block;
  font-weight: bold;
}
.umbracoform .umbraco-forms-fieldset {
  border: none;
  padding-inline: 0;
}
.umbracoform .umbraco-forms-fieldset legend {
  border: 0;
  clip: rect(0 0 0 0);
  height: auto;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
  white-space: nowrap;
}
.umbracoform .umbraco-forms-tooltip {
  font-size: smaller;
  font-style: italic;
  color: var(--secondary-color);
}
.umbracoform .umbraco-forms-tooltip::before {
  content: "— ";
}
.umbracoform .umbraco-forms-indicator {
  color: rgba(236, 14, 14, 0.8);
  font-weight: normal;
}
.umbracoform .field-validation-error {
  font-size: smaller;
  font-style: italic;
  color: rgba(236, 14, 14, 0.8);
}
.umbracoform .umbraco-forms-navigation {
  display: flex;
  justify-content: center;
}
.umbracoform input[type=text],
.umbracoform input[type=email],
.umbracoform input[type=tel],
.umbracoform textarea {
  border: 1px solid;
  border-radius: 3px;
  inline-size: 100%;
  padding-inline: 0.5em;
  background-color: var(--background-color);
}
.umbracoform input[type=submit] {
  font-size: 1.4375rem;
  line-height: 1.2173913;
  transition: 300ms ease-in-out;
  display: inline-block;
  text-decoration: none;
  color: var(--secondary-color);
  cursor: pointer;
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: #ccc;
}
.umbracoform input[type=submit]:hover,
.umbracoform input[type=submit]:focus {
  color: var(--primary-color);
}
.umbracoform input[type=submit]:hover,
.umbracoform input[type=submit]:focus {
  color: var(--primary-color);
}
@media only screen and (min-width: 700px) {
  .umbracoform input[type=submit] {
    border: 1px solid;
    padding: 0 1.5rem;
    border-radius: 1.5rem;
  }
}
.umbracoform input[type=submit]:hover,
.umbracoform input[type=submit]:focus {
  background-color: var(--primary-color-10);
  color: #ccc;
}
.umbracoform .dataconsent .field-validation-error {
  display: block;
}
.umbracoform .umbraco-forms-hidden {
  display: none;
}
main.article {
  padding-block: 4em;
}
main.article .content-column {
  display: grid;
  grid-template-columns: [full-start] 15px 1fr [wrapper-start content-start] minmax(40%, 65ch) [content-end] 2.5fr [wrapper-end] 1fr 15px [full-end];
}
main.article .content-column > * + * {
  -webkit-margin-before: 1rem;
          margin-block-start: 1rem;
}
main.article .content-column > *:where(*) {
  grid-column: content;
}
main.article .content-column > *:is(.fullwidth) {
  grid-column: full;
}
main.article .content-column > *:is(.image) {
  grid-column: wrapper;
}
main.article .content-column > *:is(.contained) {
  grid-column: content;
}
[data-layout="magazine-page"] {
  -webkit-padding-after: 6rem;
          padding-block-end: 6rem;
}
body[data-layout="year-index"] > main {
  margin-right: auto;
  margin-left: auto;
  max-width: 1600px;
}
.debug body[data-layout="year-index"] * {
  background: rgba(0, 0, 0, 0.1);
}
body[data-layout="year-index"] .navigation {
  color: var(--primary-color);
}
body[data-layout="year-index"] .navigation .yearnavigation {
  display: flex;
  justify-content: center;
}
body[data-layout="year-index"] .navigation .yearnavigation ul {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
body[data-layout="year-index"] .navigation .yearnavigation ul li {
  inline-size: 100%;
}
body[data-layout="year-index"] .navigation .yearnavigation ul li:has(a[aria-current="true"]) {
  background: linear-gradient(to right, transparent 80%, #333 0) center no-repeat;
  background-size: 100% 1px;
}
body[data-layout="year-index"] .intro {
  color: var(--primary-color);
  -webkit-border-start: 1px solid var(--text-color);
          border-inline-start: 1px solid var(--text-color);
  grid-template-columns: 1fr 1fr 1fr;
}
@media screen and (min-width: 600px) {
  body[data-layout="year-index"] .intro {
    display: grid;
  }
}
body[data-layout="year-index"] .intro .current {
  -webkit-border-end: 1px solid var(--text-color);
          border-inline-end: 1px solid var(--text-color);
  grid-column: 1;
  display: grid;
  grid-template-columns: 101px 1fr;
  grid-template-rows: 1fr 1fr;
}
body[data-layout="year-index"] .intro .navigation {
  grid-column: 1;
  grid-row: 1 / -1;
  -webkit-border-end: 1px solid var(--text-color);
          border-inline-end: 1px solid var(--text-color);
}
body[data-layout="year-index"] .intro .logo {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  justify-content: center;
  align-items: center;
}
body[data-layout="year-index"] .intro .logo h1 {
  font-size: 3.875rem;
  line-height: 1.08;
  font-weight: normal;
  max-inline-size: -webkit-min-content;
  max-inline-size: -moz-min-content;
  max-inline-size: min-content;
}
body[data-layout="year-index"] .intro .logo h1 strong {
  font-size: 13.875rem;
  line-height: 0.8;
}
body[data-layout="year-index"] .intro .artwork {
  grid-column: 2 / 4;
  grid-row: 1 / -1;
}
body[data-layout="year-index"] .intro .artwork .artwork-info {
  -webkit-border-before: 1px solid var(--text-color);
          border-block-start: 1px solid var(--text-color);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5em 2rem;
  color: var(--text-color);
  padding: 30px;
}
body[data-layout="year-index"] .intro .artwork .artwork-info > strong {
  flex: 1 30%;
  font-size: 1.3125em;
}
body[data-layout="year-index"] .intro .artwork .artwork-info .creator {
  display: flex;
  flex: 2 60%;
}
body[data-layout="year-index"] .intro .artwork .artwork-info .instructions {
  flex-grow: 4;
}
body[data-layout="year-index"] .intro .artwork .artwork-info .credit {
  color: var(--secondary-color);
}