:root {
  --paper:      #fdf9f7;
  --white:      #fff;
  --coral:      #f09a94;
  --coral-pale: #fbd0cb;
  --tan:        #e6c39d;
  --ink:        #8a6650;

  --blue:     #a7d9f0;
  --magenta:  #f09cc0;
  --lavender: #cbbde6;
  --yellow:   #fadf94;

  --d:      min(62vmin, 43.75rem);
  --centre: 29%;

  --bite:      0.5;
  --toggle-d:  6.4rem;
  --spoke-d:   6.6rem;

  --orbit-x:   max(var(--centre), calc(var(--d) * 0.5 + 7rem));
  --easel-gap: 5.5rem;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  color: var(--ink);
  background-color: var(--paper);

  background-image:
    radial-gradient(circle, var(--yellow)   50%, transparent 51%),
    radial-gradient(circle, var(--blue)     50%, transparent 51%),
    radial-gradient(circle, var(--magenta)  50%, transparent 51%),
    radial-gradient(circle, var(--lavender) 50%, transparent 51%),
    radial-gradient(circle, var(--coral)    50%, transparent 51%),
    radial-gradient(circle, var(--yellow)   50%, transparent 51%),
    radial-gradient(circle, var(--blue)     50%, transparent 51%),
    radial-gradient(circle, var(--lavender) 50%, transparent 51%),
    radial-gradient(circle, var(--magenta)  50%, transparent 51%),
    radial-gradient(circle, var(--yellow)   50%, transparent 51%),
    radial-gradient(circle, var(--coral)    50%, transparent 51%),
    radial-gradient(circle, var(--blue)     50%, transparent 51%),
    radial-gradient(circle, var(--lavender) 50%, transparent 51%),
    radial-gradient(circle, var(--magenta)  50%, transparent 51%),
    radial-gradient(circle, var(--yellow)   50%, transparent 51%),
    radial-gradient(circle, var(--coral)    50%, transparent 51%);

  background-size:
    44px 44px, 13px 13px, 22px 22px, 30px 30px,  9px  9px, 52px 52px,
    17px 17px, 11px 11px, 36px 36px,  7px  7px, 25px 25px, 19px 19px,
    15px 15px, 40px 40px, 10px 10px, 28px 28px;
  background-position:
     6% 14%, 84% 16%, 69% 78%, 21% 87%, 92% 61%, 47%  5%,
    12% 46%, 58% 27%, 95% 88%, 33% 66%, 76% 41%,  3% 72%,
    64% 94%, 88% 33%, 41% 74%, 27% 22%;
  background-repeat: no-repeat;
  font-family: Verdana, Roboto, "Yu Gothic", YuGothic,
               "Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
  overflow: hidden;
}

.stage {
  position: relative;
  height: 100vh;
  height: 100dvh;
}

.orbit {
  position: absolute;
  top: 50%;

  left: var(--orbit-x);
  width: var(--d);
  height: var(--d);
  transform: translate(-50%, -50%);
}

.disc {
  position: absolute;
  inset: 0;

  z-index: 1;
  border-radius: 50%;
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(240, 133, 127, 0.16);
  overflow: hidden;
}

/* the scrolling happens in here, not on the circle, so the scrollbar cannot
   draw outside the rim. a square inset 15% from a circle's box is the largest
   that still fits inside it; 16% leaves a hair. */
.disc-scroll {
  position: absolute;
  inset: 16%;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--coral-pale) transparent;
}

.disc-scroll::-webkit-scrollbar { width: 6px; }
.disc-scroll::-webkit-scrollbar-track { background: transparent; }

.disc-scroll::-webkit-scrollbar-thumb {
  background: var(--coral-pale);
  border-radius: 3px;
}

.pane[hidden] { display: none; }

.disc-inner {
  padding: 0.2rem 0.1rem;
  text-align: center;
  font-size: 0.82rem;
  line-height: 1.85;
}

.disc h1 {
  margin: 0 0 0.9em;
  padding-bottom: 0.45em;
  border-bottom: 1px dashed var(--tan);
  font-size: 1.15rem;
  font-weight: bold;
  letter-spacing: 0.04em;
  color: var(--coral);
}

.disc p { margin: 0 0 1em; }
.disc a { color: var(--coral); }

.disc mark {
  background: linear-gradient(transparent 62%, rgba(247, 207, 92, 0.6) 62%);
  color: inherit;
}

.toggle,
.spoke {
  --a: calc(var(--h) * 30deg - 90deg);
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.toggle {
  --r: calc(var(--d) / 2 + var(--toggle-d) / 2 * var(--bite));
  width: var(--toggle-d);
  height: var(--toggle-d);
  box-sizing: border-box;
  transform:
    translate(-50%, -50%)
    rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  z-index: 3;
  gap: 0.35rem;
  border: 0;
  background: var(--coral-pale);
  color: var(--ink);
  box-shadow: 0 0 0 6px rgba(240, 133, 127, 0.18);
  font: inherit;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background 0.4s, color 0.4s;
}

.toggle-mark {
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--coral);
  transition: transform 0.5s, background 0.5s;
}

.toggle[aria-expanded="true"] { background: var(--coral); color: var(--white); }
.toggle[aria-expanded="true"] .toggle-mark { transform: scale(1.5); background: var(--white); }

.spoke {
  --r: calc(var(--d) / 2 + var(--spoke-d) / 2 * var(--bite));
  z-index: 2;
  width: var(--spoke-d);
  height: var(--spoke-d);
  box-sizing: border-box;
  padding: 0.4rem;
  background: var(--white);
  border: 3px solid var(--c);
  color: var(--ink);
  text-decoration: none;
  font-size: 0.62rem;
  font-weight: bold;
  letter-spacing: 0.04em;

  transform:
    translate(-50%, -50%)
    rotate(var(--a)) translate(var(--r)) rotate(calc(-1 * var(--a)));
  visibility: hidden;
  pointer-events: none;
  transition: background 0.4s, color 0.4s;
}

.menu.open .spoke {
  visibility: visible;
  pointer-events: auto;
}

.spoke:hover,
.spoke:focus-visible {
  background: var(--c);
  color: var(--white);
}

/* the front of the shrine: one picture, centred, no scrolling. 68% is the
   square that fits inside a circle, so the corners never cross the rim. */
.pane-cover {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0;
}

.pane-cover .cover {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* the easel: the picture that answers the circle, clear of the spokes */
.easel {
  position: absolute;
  top: 50%;
  left: calc(var(--orbit-x) + var(--d) / 2 + var(--easel-gap));
  right: 3rem;
  margin: 0;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  pointer-events: none;
}

.easel img {
  display: none;
  max-width: 100%;
  max-height: 62vh;
  border-radius: 0.4rem;
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(240, 133, 127, 0.16);
}

.easel.has img { display: block; }

.easel figcaption {
  font-size: 0.62rem;
  letter-spacing: 0.06em;
  color: var(--coral);
}

/* the gallery's list of links, in place of scrolling text */
.plates {
  margin: 0;
  padding: 0;
  list-style: none;
  text-align: left;
}

.plates li { margin: 0.15em 0; }

.plates a {
  display: block;
  padding: 0.2em 0.6em;
  border-radius: 1em;
  color: var(--ink);
  text-decoration: none;
}

.plates a:hover { background: var(--coral-pale); }

.plates a.here {
  background: var(--coral);
  color: var(--white);
}

.spoke.here { background: var(--c); color: var(--white); }

.shrine-exit {
  position: fixed;
  left: 1.2rem;
  bottom: 1rem;
  margin: 0;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
}

.shrine-exit a { color: var(--coral); }

@media (max-width: 37.5rem) {
  :root {
    --d: min(72vmin, 20rem);
    --centre: 50%;
    --toggle-d: 5rem;
    --spoke-d: 5.2rem;
  }
  .orbit { left: 50%; }
  /* no room beside the circle — gallery links stay plain links to the file */
  .easel { display: none; }
  .disc-inner { font-size: 0.75rem; }
}