.doodles { margin-block: 32px; }
.doodles-sheet { display: grid; grid-template-columns: 1fr 1fr; align-items: start; column-gap: 80px; padding: 56px 80px 64px; }
.doodle { display: block; max-width: 100%; padding: 16px; cursor: pointer; }
.doodle img { display: block; width: 100%; height: auto; transition: opacity 160ms; }
.doodle:hover img { opacity: .72; }
.doodle:focus-visible { outline: 1px solid #777; outline-offset: 8px; }
.doodle-loops { width: 176px; justify-self: start; }
.doodle-ribbons { width: 144px; justify-self: end; margin-top: 96px; }
.doodle-viewer { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 64px 24px; border: 0; background: var(--paper); color: var(--body); }
.doodle-viewer[open] { display: grid; place-items: center; }
.doodle-viewer::backdrop { background: var(--paper); }
.doodle-viewer > img { display: block; width: auto; height: min(76vh, 800px); max-width: 100%; object-fit: contain; }
.doodle-viewer form { position: absolute; top: 1.5rem; right: 1.5rem; margin: 0; }
.doodle-viewer button { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 0; border-radius: 0; background: none; padding: 0; color: #aaa; font: 400 1.1rem/1 var(--serif); text-decoration: none; cursor: pointer; transition: color .15s ease; }
.doodle-viewer button:hover { color: #333; }
.doodle-viewer button:focus { outline: none; }
.doodle-viewer button:focus-visible { color: var(--ink); text-decoration: none; }
html:has(.doodle-viewer[open]) { overflow: hidden; }
@media (max-width: 768px) {
  .doodle-viewer form { top: .6rem; right: .6rem; }
  .doodle-viewer button { width: 44px; height: 44px; }
  .doodles { margin-block: 24px; padding-inline: .75rem; }
  .doodles-sheet { column-gap: 24px; padding: 40px 0 48px; }
  .doodle { padding: 8px; }
  .doodle-loops { width: 136px; }
  .doodle-ribbons { width: 104px; margin-top: 80px; }
}
@media (prefers-reduced-motion: reduce) {
  .doodle img, .doodle-viewer button { transition: none; }
}