/* The umbrella menu: one canvas draws the whole umbrella; a button lies over it (over the furled umbrella when
   closed, over the brass tip at the top when open) and the sections are real links the canvas draws on the panels. */
:root {
  --page: #ffffff;          /* the page */
  --canopy-a: #7c2230;      /* the dark panels of the canopy */
  --canopy-b: #efe5d2;      /* the light panels */
  --ink-a: #f6ecdc;         /* the sections printed on the dark panels */
  --ink-b: #6e1d29;         /* and on the light ones */
  --wood: #6a3b20;          /* the handle */
  --brass: #c99a45;         /* the tip, the rib ends and the snap */
  --shaft: #2b2523;         /* the shaft, the ribs and the stretchers */
  --strap: #5c1823;         /* the strap that holds the furled umbrella */
  --tag: #dcc7a3;           /* the paper tag on the handle */
  --tag-ink: #2b211b;       /* the words on the tag */
  --focus: #1b1614;         /* 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(--tag-ink);
  font-family: 'Bricolage Grotesque Variable', system-ui, sans-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: 48px 16px;
}

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

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

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

/* the button: the script puts it over the furled umbrella, or over the tip of the open one */
.brolly__btn {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  padding: 0;
  border: 0;
  border-radius: calc(var(--u) * 30);
  background: transparent;
  cursor: pointer;
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

/* closed, the canvas rings the tag; open, the button rings the brass tip */
.brolly[data-state='open'] .brolly__btn:focus-visible {
  box-shadow: 0 0 0 2px var(--page), 0 0 0 4px var(--focus);
}

.brolly[data-state='open'] .brolly__btn {
  border-radius: 50%;
}

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