/* The paper fan menu: one canvas draws the whole fan; a button lies over it (along the closed fan, or over the rivet
   of the open one) and the sections are real links that the canvas prints on the pleats. In a real site the fan sits
   wherever the menu goes (a corner of the header, say): here it is alone in the middle of the page. */
:root {
  --page: #ffffff;          /* the page */
  --paper: #f5ecd9;         /* the paper of the leaf, near its top edge */
  --paper-low: #ecdfc4;     /* and down by the sticks */
  --paper-back: #d8c49c;    /* the back of the paper */
  --sumi: #2a2320;          /* the ink: the sections and the plum branch */
  --vermilion: #c63d24;     /* a section lit under the pointer, the seal, the tassel */
  --gold: #cfa553;          /* the gold leaf: the moon, the flakes, the borders */
  --indigo: #2e4466;        /* the waves at the foot of the leaf */
  --blossom: #fbf1ee;       /* the plum blossom */
  --blush: #e7a3a6;         /* the pink at its heart */
  --bamboo: #c99a5c;        /* the inner sticks */
  --lacquer: #231614;       /* the two guards */
  --focus: #1d1714;         /* the ring of the keyboard focus */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

html,
body {
  margin: 0;
  overflow-x: clip;
}

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--sumi);
  font-family: 'Zen Old Mincho', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.stage {
  min-height: 100svh;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  place-items: center;
  padding: 40px 16px;
}

/* ---------------------------------------------------------------- the fan */
.fan {
  --u: 1px;                 /* set by the script: one unit of the drawing */
  position: relative;
  width: calc(var(--u) * 460);
  height: calc(var(--u) * 330);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.fan__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}

.fan.is-over {
  cursor: pointer;
}

/* the button: the script lays it along the closed fan (turned with it), or round the rivet of the open one */
.fan__btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  outline: none;
  transform-origin: 50% 50%;
  -webkit-tap-highlight-color: transparent;
}

.fan__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--focus);
}

/* the links take the keyboard and the screen reader; the canvas draws them, and their focus, on the pleats */
.fan__nav a {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  outline: none;
}