article {
   max-width: 40rem;
   margin-left: auto;
   margin-right: auto;
}



p {
   margin-top: var(--space-2);
   margin-bottom: var(--space-2);
}

em {
   letter-spacing: 0.03em;
}


/* Footnotes shown as tooltips (hover on pointer devices, tap on touch). The
   footnote list at the bottom stays as a no-JS fallback. */
.footnote-ref {
   cursor: pointer;
}

.has-footnote-tooltip {
   position: relative;
}

.footnote-tooltip {
   position: absolute;
   left: 50%;
   bottom: calc(100% + 0.5em);
   transform: translateX(-50%);
   z-index: 10;

   width: max-content;
   max-width: min(18rem, 80vw);

   padding: 0.6em 0.8em;
   font-size: 0.85rem;
   line-height: 1.4;
   letter-spacing: normal;
   text-align: left;
   color: var(--text-1);
   background-color: var(--surface-2);
   border: 1px solid var(--surface-3);
   border-radius: 0.5rem;
   box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);

   opacity: 0;
   visibility: hidden;
   transition: opacity 0.15s ease, visibility 0.15s ease;
   pointer-events: none;
}
.footnote-tooltip p {
   margin: 0;
}
.footnote-tooltip::after {
   content: "";
   position: absolute;
   top: 100%;
   left: 50%;
   transform: translateX(-50%);
   border: 0.4em solid transparent;
   border-top-color: var(--surface-2);
}

@media (hover: hover) {
   .has-footnote-tooltip:hover .footnote-tooltip,
   .has-footnote-tooltip:focus-within .footnote-tooltip {
      opacity: 1;
      visibility: visible;
   }
}

.has-footnote-tooltip.tooltip-open .footnote-tooltip {
   opacity: 1;
   visibility: visible;
}

/* The footnote content lives in the tooltips now; keep the generated list in
   the DOM (the tooltip script reads it) but hide it at the bottom of the page. */
.footnote {
   display: none;
}


figure {
   width: 100%;
   margin: 0;
}
figure > picture {
   
}
figure > picture > img {
   max-width: 100%;
}

img {
   border-radius: 0.5rem;
}


pre {
   border-radius: 0.5rem;
}

.interactive {
   background-color: var(--surface-2);
   border-radius: 1rem;
   padding: var(--space-1);
}

.article-dates {
   font-size: 0.8em;
   opacity: 0.5;
}

.button {
   display: inline-block;
   padding: 0.2em 0.6em;
   font-size: 1.3em;
   background-color: var(--surface-2);
   border: none;
   color: var(--text-1);
   cursor: pointer;
   transition: background 0.3s ease-in-out;
}
.button:hover {
   background-color: var(--surface-3);
}