/* Octin Spraypaint ("artshouldbefree.com" heading) */
@font-face {
  font-family: 'Octin Spraypaint';
  src: url('fonts/octin-spraypaint.woff') format('woff'),
       url('fonts/octin-spraypaint.ttf') format('truetype');
  font-display: swap;
}

:root {
  --ink: #201e16;
  --muted: #6b6656;
  --accent: #000000;
  --panel: #fffdf7;
  --tile-blank: #e9e3d3;
  --tile-border: #d8d0ba;
  --lock: #a8752f;
  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

* {
  box-sizing: border-box;
}

html, body {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  -webkit-tap-highlight-color: transparent;
}

a.back {
  text-decoration: none;
}

/* ---- index page (SVG link) ---- */

body.page-index {
  --bg: #FFA554;   /* orange fallback while the texture loads */
  background: var(--bg) url('images/index-bg.gif') repeat;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}

/* the "ART SHOULD BE FREE" stamp, set in Octin Spraypaint */
body.page-index a.stamp {
  --stamp: #ed462f;
  --s: clamp(150px, 16.5vw, 290px);   /* overall stamp width; everything scales from this (150px on phones) */
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--s);
  padding: calc(var(--s) * 0.04) calc(var(--s) * 0.06) calc(var(--s) * 0.05);
  border: calc(var(--s) * 0.03) solid var(--stamp);
  border-radius: calc(var(--s) * 0.07);
  color: var(--stamp);
  font-family: 'Octin Spraypaint', Impact, sans-serif;
  line-height: 0.85;
  text-decoration: none;
  transform: rotate(-5deg);
  transition: transform 150ms ease;
}
body.page-index a.stamp:hover { transform: rotate(-5deg) scale(1.04); }
body.page-index .stamp-art    { font-size: calc(var(--s) * 0.38); letter-spacing: 0.03em; margin-right: calc(var(--s) * 0.06); }
body.page-index .stamp-should { white-space: nowrap; font-size: calc(var(--s) * 0.17); letter-spacing: 0.12em; margin: calc(var(--s) * 0.02) 0 calc(var(--s) * 0.01) calc(var(--s) * 0.03); }
body.page-index .stamp-free   { font-size: calc(var(--s) * 0.42); letter-spacing: 0.06em; }

/* ---- vault page (random GIF links) ---- */

body.page-vault {
  --bg: #9a9a9a;   /* grey fallback while the texture loads */
  background: var(--bg) url('images/vault-bg-vitruvian.gif') repeat;
  position: relative;
  overflow: hidden;
}

body.page-vault .tile {
  position: absolute;
  width: 100px;
  display: block;
}

body.page-vault .tile img {
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;   /* small GIFs stay crisp at 2x */
}

body.page-vault .tile.locked {
  cursor: not-allowed;
  pointer-events: none;
}

body.page-vault .tile.locked img {
  filter: grayscale(1) brightness(0.55);
}

body.page-vault .tile.locked .lock-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

body.page-vault .lock-badge svg {
  width: 32px;
  height: auto;
  color: var(--lock);
}

body.page-vault .tile.active {
  cursor: pointer;
  transition: transform 150ms ease;
}

body.page-vault .tile.active:hover {
  transform: scale(1.05);
}

body.page-vault a.back {
  position: absolute;
  top: 16px;
  left: 16px;
  color: var(--lock);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  z-index: 10;
}


/* ---- grid page (peek/reveal board, used by pdf-download.html) ---- */


body.page-grid {
  --bg: #eef4ec;
  background: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 24px 16px;
  background-image: url('images/download-bg.gif');
  background-repeat: repeat;
}
 
/* "artshouldbefree.com" heading (download + vault pages) */
.site-title {
  margin: 0 0 20px;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: center;
  color: #ffffff;
  font-family: 'Octin Spraypaint', 'Courier New', Courier, monospace;
  font-weight: 400;
  font-size: clamp(24px, 5vw, 44px);
  line-height: 1.1;
  text-shadow:
    2px 2px 1px #22e04a,     /* green offset shadow */
    0 0 0.5em rgba(0, 229, 212, 0.6),   /* turquoise glow (softer) */
    0 0 0.15em rgba(0, 229, 212, 0.8);  /* turquoise inner glow */
}
 
body.page-grid .board {
  display: grid;
  grid-template-columns: repeat(5, minmax(150px, 128px));
  grid-template-rows: repeat(5, minmax(100px, 76px));
  gap: 0;
  max-width: 100%;
  overflow-x: auto;
}
body.page-grid .board .tile img { image-rendering: auto; }
 
body.page-grid .tile {
  position: relative;
  background: #2a2820;   /* empty tile colour before anything is revealed */
  overflow: hidden;
  display: block;
  padding: 0;
}
 
body.page-grid .tile img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
 
body.page-grid a.back {
  position: fixed;
  top: 16px;
  left: 16px;
  color: var(--accent);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  z-index: 10;
}


/* ---- essay page ---- */

body.page-essay {
  --bg: #ffffff;
  --red: #ee220c;          /* title + thank-you */
  --gloss: #81cae0;        /* glossary terms */
  --cite: #d5d5d5;         /* references */
  --note: #3a26fe;         /* the [note] section */
  --poem: #bec1c2;         /* Steve Dietz text */
  background: var(--bg);
  color: var(--ink);
  font-family: 'Courier New', Courier, monospace;
  padding: 96px 16px 80px;
}

body.page-essay main {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 clamp(4px, 3vw, 40px) 72px;
  background: transparent;
  color: #000;
  font-size: 15px;
  line-height: 1.45;
}

body.page-essay main p {
  margin: 0 0 1.4em;
  color: inherit;
  line-height: inherit;
}

body.page-essay main a { color: inherit; text-decoration: underline; overflow-wrap: anywhere; }
body.page-essay main em { font-style: italic; }

body.page-essay .gloss { color: var(--gloss); }
body.page-essay .cite  { color: var(--cite); }
body.page-essay .cite a { color: var(--cite); }
body.page-essay .center { text-align: center; }

/* title page */
body.page-essay .title-page {
  min-height: 70vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
  color: var(--red);
  padding: 6vh 0;
}
body.page-essay .title-page h1,
body.page-essay .title-page .subtitle {
  font-weight: 400;
  font-size: clamp(19px, 3.4vw, 25px);
  line-height: 1.2;
  margin: 0 0 1.2em;
}
body.page-essay .title-page .byline {
  font-size: 16px;
  line-height: 1.2;
  margin: 5em 0 0;
}

/* front matter */
body.page-essay .notice {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.35;
  margin: 3em 0 3.5em;
}
body.page-essay .index { text-align: center; margin: 0 0 4em; }
body.page-essay .index h2 {
  font-size: 16px;
  text-decoration: none;
  margin: 0 0 1.6em;
}
body.page-essay .index ol { list-style: none; margin: 0; padding: 0; }
body.page-essay .index li { margin: 0 0 1.1em; }
body.page-essay .index a { text-decoration: underline; text-underline-offset: 3px; }

/* section headings */
body.page-essay main h2 {
  font-size: 15px;
  font-weight: 400;
  text-decoration: underline;
  text-underline-offset: 3px;
  margin: 3.5em 0 1.4em;
  scroll-margin-top: 90px;
}
body.page-essay main h2.italic { font-style: italic; }
body.page-essay main h2.center { text-align: center; }

/* centred interview quotes */
body.page-essay blockquote.pull {
  margin: 0 auto 1.4em;
  max-width: 92%;
  text-align: center;
}
body.page-essay blockquote.pull p { margin: 0; }
body.page-essay blockquote.pull .attr { margin-top: 0; }

/* the deep-blue note */
body.page-essay aside.note { color: var(--note); }

/* figures + image placeholders */
body.page-essay figure.fig { margin: 3em 0; }
body.page-essay figure.fig .row {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 5%;
  margin: 0 0 1.4em;
}
body.page-essay figure.fig .ph,
body.page-essay figure.fig img {
  display: block;
  width: var(--w, 100%);
  max-width: 100%;
  height: auto;
}
body.page-essay figure.fig .ph {
  aspect-ratio: var(--ar, 4 / 3);
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(45deg, #f1f1f1 0 10px, #e8e8e8 10px 20px);
  border: 1px dashed #b9b9b9;
  color: #8a8a8a;
  font-size: 12px;
}
body.page-essay figcaption {
  text-align: center;
  font-size: 12.5px;
  line-height: 1.35;
  max-width: 88%;
  margin: 0 auto;
}

/* Steve Dietz text (Fude Enogu in the PDF; Yomogi is the closest free web font) */
body.page-essay figure.poem { margin: 4em 0; text-align: center; }
body.page-essay figure.poem p {
  font-family: 'Fude Enogu', 'Yomogi', cursive;
  color: var(--poem);
  font-size: clamp(17px, 3vw, 22px);
  line-height: 1.12;
  margin: 0 0 3em;
}

/* footnotes + closing */
body.page-essay sup.fnref { font-size: 0.6em; line-height: 0; }
body.page-essay sup.fnref a { text-decoration: none; }
body.page-essay .thanks {
  color: var(--red);
  text-align: center;
  margin: 6em 0 2em;
}
body.page-essay .footnotes {
  font-size: 13.5px;
  line-height: 1.35;
  margin-top: 4em;
}
body.page-essay .footnotes::before {
  content: "";
  display: block;
  width: 120px;
  border-top: 1px solid #000;
  margin-bottom: 1em;
}
body.page-essay .footnotes ol { padding-left: 1.4em; margin: 0; }
body.page-essay .footnotes li { margin-bottom: 0.6em; }
body.page-essay .fnback { text-decoration: none !important; }

/* back link: folded paper corner (essay page only) */

/* The link itself is the rotated text; the fold is drawn by ::before and
   turned back upright, so this works with or without a <span> inside. */
body.page-essay a.back {
  --fold: 104px;
  --nudge: 13px;              /* how far the text sits off the crease, onto the flap */
  --fold-gap: #201e16;        /* what shows where the corner has lifted away */
  --fold-crease: #d6d6d6;     /* shadowed paper along the fold line */
  --fold-paper: #ffffff;      /* back of the page, near the tip */
  position: fixed;
  top: calc(var(--fold) / 2 + var(--nudge));
  left: calc(var(--fold) / 2 + var(--nudge));
  z-index: 10;
  display: block;
  white-space: nowrap;
  line-height: 1;
  color: var(--accent);
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  text-decoration: none;
  transform: translate(-50%, -50%) rotate(-45deg);
  transition: top 200ms ease, left 200ms ease;
}

body.page-essay a.back::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: -1;
  width: var(--fold);
  height: var(--fold);
  /* undo the text's rotation and shift back so the square fills the corner */
  transform: translate(-50%, -50%) rotate(45deg)
             translate(calc(var(--nudge) * -1), calc(var(--nudge) * -1));
  /* top-left half = gap, bottom-right half = the folded-over flap */
  background: linear-gradient(135deg,
    var(--fold-gap) 0 50%,
    var(--fold-crease) 50%,
    #f2f2f2 68%,
    var(--fold-paper) 100%);
  /* shadow falls only along the flap's two outer edges */
  filter: drop-shadow(2px 3px 3px rgba(32, 30, 22, 0.35));
  transition: width 200ms ease, height 200ms ease;
}

body.page-essay a.back:hover,
body.page-essay a.back:focus-visible {
  --fold: 124px;
}

body.page-essay a.back:focus-visible {
  outline: none;
  text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
  body.page-essay a.back,
  body.page-essay a.back::before { transition: none; }
}
/* page number (essay page): follows the PDF's page numbers as you scroll */
body.page-essay .page-no {
  position: fixed;
  right: max(20px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 10;
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  color: var(--ink);
  pointer-events: none;
  font-variant-numeric: tabular-nums;
}

/* ---- attachments page (glossary + figures), all in the PDF's pale blues ---- */

body.page-attachments main { color: #6cc1db; }
body.page-attachments .title-page { color: #bfe4ef; }
body.page-attachments .title-page .subtitle:last-child { margin-top: 1em; }
body.page-attachments .index { color: #9fd7e7; }
body.page-attachments main h2 {
  text-decoration: none;
  margin: 4em 0 1.6em;
}
body.page-attachments .index h2 { margin-top: 0; }
body.page-attachments .glossary p.sub { padding-left: 1.5em; }
body.page-attachments .figure { margin: 0 0 3em; overflow-x: auto; -webkit-overflow-scrolling: touch; }
body.page-attachments svg.diagram {
  display: block;
  width: 100%;
  height: auto;
  min-width: 560px;   /* on phones the figure scrolls sideways instead of shrinking the text */
  font-family: 'Courier New', Courier, monospace;
  overflow: visible;
}
body.page-attachments svg.diagram .ph text { font-size: 7px; fill: #8a8a8a; }

/* ---- image viewer (essay + attachments): click an image to open it large ---- */

body.page-essay figure.fig img,
body.page-essay svg.diagram image { cursor: zoom-in; }

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 64px 16px 40px;
  background: #ffffff;
  opacity: 0;
  visibility: hidden;
  transition: opacity 200ms ease, visibility 0s linear 200ms;
  cursor: zoom-out;
  outline: none;
}
.lightbox.open {
  opacity: 1;
  visibility: visible;
  transition: opacity 200ms ease;
}
.lightbox img {
  display: block;
  max-width: 94vw;
  object-fit: contain;
  image-rendering: auto;
  cursor: default;
  transform: scale(0.94);
  transition: transform 220ms ease;
}
.lightbox.open img { transform: scale(1); }
.lightbox .lb-caption {
  max-width: min(90vw, 760px);
  text-align: center;
  font-family: 'Courier New', Courier, monospace;
  font-size: 12.5px;
  line-height: 1.35;
  color: #000;
  cursor: default;
}
.lightbox .lb-caption:empty { display: none; }
.lightbox .lb-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top, 0px));
  right: max(16px, env(safe-area-inset-right, 0px));
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: #000;
  font-family: 'Courier New', Courier, monospace;
  font-size: 30px;
  line-height: 44px;
  cursor: pointer;
}
.lightbox .lb-close:focus-visible { outline: 1px solid #000; }
body.lightbox-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .lightbox, .lightbox img { transition: none; }
}

/* ---- essay page: glossary words + their pop-up box ---- */

body.page-essay .gloss[data-term] { cursor: default; }
body.page-essay .gloss[data-term]:focus-visible { outline: 1px solid var(--gloss); outline-offset: 2px; }

.gloss-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  max-width: min(340px, calc(100vw - 16px));
  padding: 10px 12px;
  background: #ffffff;
  border: 1px solid #000;
  color: #000;
  font-family: 'Courier New', Courier, monospace;
  font-size: 15px;
  line-height: 1.45;
  text-align: left;
  pointer-events: none;   /* never gets in the way of the cursor */
  visibility: hidden;
}
.gloss-tip.open { visibility: visible; }
.gloss-tip em { font-style: italic; }

/* touch screens: docked along the bottom of the window */
.gloss-tip.docked {
  left: 16px;
  right: 16px;
  top: auto;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  max-width: none;
  max-height: 45vh;
  overflow-y: auto;
  pointer-events: auto;   /* so a long entry can be scrolled */
}

/* glossary box with pictures: pictures in a column to the right of the text */
.gloss-tip .gt-imgs { order: 2; }
.gloss-tip.has-imgs {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  max-width: min(520px, calc(100vw - 16px));
}
.gloss-tip .gt-imgs {
  flex: 0 0 150px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.gloss-tip .gt-imgs img {
  display: block;
  width: 100%;
  height: auto;
}
.gloss-tip .gt-text { flex: 1 1 auto; min-width: 0; }
.gloss-tip.docked.has-imgs { max-width: none; }
.gloss-tip.docked .gt-imgs { flex-basis: 96px; }

/* grid page on phones: 2 columns x 5 rows (only the first 10 tiles show) */
@media (max-width: 600px) {
  body.page-grid .board {
    width: min(100%, 340px);
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    overflow: visible;
  }
  body.page-grid .tile { aspect-ratio: 3 / 2; }
  body.page-grid .tile:nth-child(n + 11) { display: none; }
}

/* grid page: notepad GIF in the bottom-left corner, links to the essay */
body.page-grid a.corner-link {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: block;
  line-height: 0;
  transition: transform 150ms ease;
}
body.page-grid a.corner-link img { display: block; width: 48px; height: auto; image-rendering: pixelated; }   /* 24x52 GIF shown at 2x */
body.page-grid a.corner-link:hover { transform: scale(1.05); }
@media (max-width: 600px) {
  /* phones: the grid fills the screen, so the notepad sits below it at the bottom-left of the page */
  body.page-grid { position: relative; height: auto; min-height: 100%; padding-top: 80px; padding-bottom: 150px; }
  body.page-grid a.corner-link { position: absolute; }
}

/* grid page: back button as a glossy black 3D oval */
body.page-grid a.back {
  padding: 7px 18px 8px;
  border-radius: 50%;
  border: 1px solid #000;
  color: #fff;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.55);
  background:
    radial-gradient(ellipse 70% 45% at 50% 18%, rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 70%),  /* shine */
    radial-gradient(ellipse at 50% 120%, #6a6a6a 0%, rgba(106, 106, 106, 0) 60%),                     /* glow from below */
    linear-gradient(to bottom, #4a4a4a 0%, #1a1a1a 55%, #000000 100%);                                  /* body */
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.6),
    inset 0 -3px 5px rgba(0, 0, 0, 0.6),
    0 3px 5px rgba(0, 0, 0, 0.5);
  transition: transform 100ms ease, box-shadow 100ms ease;
}
body.page-grid a.back:hover { filter: brightness(1.1); }
body.page-grid a.back:active {
  transform: translateY(2px);
  box-shadow:
    inset 0 1px 1px rgba(255, 255, 255, 0.4),
    inset 0 -1px 3px rgba(0, 0, 0, 0.6),
    0 1px 2px rgba(0, 0, 0, 0.5);
}

/* grid page: the download boxes that turn up in the tiles */
body.page-grid .tile .dl {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: #2a2820;   /* same as the empty tiles */
  color: #ffffff;
  font-family: 'Courier New', Courier, monospace;
  font-size: 14px;
  line-height: 1.25;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}
body.page-grid .tile .dl[hidden],
body.page-grid .tile img[hidden] { display: none; }
body.page-grid .tile .dl:focus-visible { outline: 1px solid #fff; outline-offset: -4px; }

/* essay page: book GIF in the bottom-left corner, links to the PDF download page */
body.page-essay a.corner-link {
  position: fixed;
  left: max(16px, env(safe-area-inset-left, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 10;
  display: block;
  line-height: 0;
  transition: transform 150ms ease;
}
body.page-essay a.corner-link img { display: block; width: 74px; height: auto; image-rendering: pixelated; }   /* 37x30 GIF shown at 2x */
body.page-essay a.corner-link:hover { transform: scale(1.05); }

/* narrower screens: the text runs to the edges, so the book sits at the very end of the page instead */
@media (max-width: 1100px) {
  body.page-essay { position: relative; height: auto; min-height: 100%; padding-bottom: 150px; }
  body.page-essay a.corner-link { position: absolute; }
}

/* spray-paint cursor layer: sits over the page but never blocks clicks */
.spray-layer {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
}

/* spray colour picker (top-right), Windows 98 / MS Paint style */
.paint-picker {
  position: fixed;
  top: 16px;
  right: max(16px, env(safe-area-inset-right, 0px));
  z-index: 30;   /* above the paint layer */
  font-family: 'MS Sans Serif', Tahoma, Geneva, Verdana, sans-serif;
  font-size: 11px;
}
.paint-picker .pp-button {
  display: block;
  width: 36px;
  height: 30px;
  padding: 4px;
  background: #c0c0c0;
  border: 0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #fff, inset -2px -2px #808080, inset 2px 2px #dfdfdf;
  cursor: pointer;
}
.paint-picker .pp-button:active,
.paint-picker .pp-button[aria-expanded="true"] {
  box-shadow: inset -1px -1px #fff, inset 1px 1px #000, inset -2px -2px #dfdfdf, inset 2px 2px #808080;
  padding: 5px 3px 3px 5px;
}
.paint-picker .pp-current {
  display: block;
  width: 100%;
  height: 100%;
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff;
  border: 1px solid #000;
}
.paint-picker .pp-panel {
  position: absolute;
  top: 34px;
  right: 0;
  padding: 6px 8px 10px;
  background: #c0c0c0;
  box-shadow: inset -1px -1px #000, inset 1px 1px #dfdfdf, inset -2px -2px #808080, inset 2px 2px #fff;
  color: #000;
}
.paint-picker .pp-panel[hidden] { display: none; }
.paint-picker .pp-label { margin: 0 0 5px; white-space: nowrap; }
.paint-picker .pp-grid {
  display: grid;
  grid-template-columns: repeat(8, 20px);
  gap: 5px 6px;
}
.paint-picker .pp-swatch {
  width: 20px;
  height: 16px;
  padding: 0;
  border: 0;
  background: var(--c);
  box-shadow: inset 1px 1px #808080, inset -1px -1px #fff, inset 2px 2px #000, inset -2px -2px #dfdfdf;
  cursor: pointer;
}
.paint-picker .pp-swatch.on { outline: 1px dotted #000; outline-offset: 2px; }
.paint-picker .pp-swatch:focus-visible { outline: 1px dotted #000; outline-offset: 2px; }

/* vault page: round dice button in the bottom-right corner, reshuffles the GIFs */
body.page-vault .dice {
  position: fixed;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  z-index: 10;
  width: 116px;
  height: 116px;
  padding: 0;
  border: 0;
  background: transparent;             /* no circle, just the pig */
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  transition: transform 150ms ease;
}
body.page-vault .dice img { display: block; width: auto; height: 72px; }
body.page-vault .dice:hover { transform: scale(1.05); }
body.page-vault .dice:active { transform: scale(0.95); }
body.page-vault .dice:focus-visible { outline: 1px dotted #000; outline-offset: 3px; }

/* the GIFs slide to their new spots when reshuffled */
body.page-vault #field.shuffling .tile { transition: left 450ms ease, top 450ms ease, transform 150ms ease; }
@media (prefers-reduced-motion: reduce) {
  body.page-vault #field.shuffling .tile { transition: none; }
}

/* vault page: heading pinned to the top centre, above the scattered GIFs */
body.page-vault .site-title {
  position: absolute;
  top: 24px;
  left: 16px;
  right: 16px;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}


/* vault heading: neon green news-ticker strip that scrolls across the full width of the top */
body.page-vault .site-title.ticker {
  top: 16px;
  left: 0;
  right: 0;
  height: 58px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: transparent;
  border: 0;
  color: #39ff14;                               /* neon green */
  text-shadow: none;
  white-space: nowrap;
}

body.page-vault .ticker-track {
  display: flex;
  width: max-content;
  animation: ticker 36s linear infinite;   /* twice the text, twice the time = same speed */
}
body.page-vault .ticker-half { display: flex; }
body.page-vault .ticker-half span { padding: 0 0.5em; }
body.page-vault .ticker-half .sep { font-size: 0.5em; align-self: center; opacity: 0.8; }
@keyframes ticker {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  body.page-vault .ticker-track { animation: none; }
}
@media (max-width: 600px) {
  body.page-vault .site-title.ticker { height: 56px; font-size: 32px; }   /* bigger ticker text on phones */
}

/* phones: hide the corner GIF links on the essay and download pages (and the space kept for them) */
@media (max-width: 600px) {
  body.page-essay a.corner-link,
  body.page-grid a.corner-link { display: none; }
  body.page-essay { padding-bottom: 80px; }
  body.page-grid { padding-bottom: 24px; }
}

/* phones: smaller folded-corner "index" link on the essay page */
@media (max-width: 600px) {
  body.page-essay a.back { --fold: 80px; --nudge: 10px; font-size: 12px; }
  body.page-essay a.back:hover,
  body.page-essay a.back:focus-visible { --fold: 94px; }
}

/* phones: the download page fits the screen exactly and never scrolls,
   so dragging a finger only sprays paint */
@media (max-width: 600px) {
  html:has(body.page-grid) { height: 100%; overflow: hidden; }
  body.page-grid {
    height: 100vh;
    height: 100dvh;                 /* the visible screen height, ignoring the browser's address bar */
    min-height: 0;
    overflow: hidden;
    padding: 72px 16px 16px;
    justify-content: center;
    touch-action: none;             /* no scrolling, bouncing or zooming by dragging */
    overscroll-behavior: none;
  }
  /* the 2 x 5 grid is 5/3 as tall as it is wide, so cap its width to what fits in the height */
  body.page-grid .board { width: min(100%, 340px, calc((100dvh - 96px) * 0.6)); }
}

/* bubble cursor layer (index page): over the page but never blocks clicks */
.bubble-layer {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  pointer-events: none;
  image-rendering: crisp-edges;
  image-rendering: pixelated;      /* chunky, un-smoothed pixels */
}

/* phones: the index page fits the screen and never scrolls or bounces, so dragging a finger just blows bubbles */
@media (max-width: 600px) {
  html:has(body.page-index) { height: 100%; overflow: hidden; }
  body.page-index {
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }
}
body.page-essay figure.fig.stacked .row { margin-bottom: 0; }   /* bak.spc screenshots stacked flush, as in the PDF */
body.page-essay figure.fig.stacked figcaption { margin-top: 1.4em; }