/* The signpost menu: an oak board on a wooden post, and painted arrows that the script turns round the post in 3D.
   The whole drawing is measured in units (--u, set by the script from the width of the screen): the frame is 440
   units wide, the post stands in its middle. Every board is a stack of flat slices: the painted front, three slices
   of bare wood that make its thickness when it turns, and the painted back. */
:root {
  --page: #ffffff;          /* the page */
  --post: #8a5a34;          /* the wood of the post */
  --post-dark: #4a2c16;     /* the shadowed side of the post */
  --cap: #3b3430;           /* the iron cap on the post */
  --cap-dark: #221d1a;
  --oak: #dcb37a;           /* the board at the top, the menu button */
  --oak-ink: #3b2110;       /* the words burnt into it */
  --edge: #6e4524;          /* the bare wood seen on the edges of the boards */
  --strap: #2c2724;         /* the iron straps holding the arrows to the post */
  --focus: #1d1a17;         /* 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(--oak-ink);
  font-family: 'Shantell Sans Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
  text-decoration: 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 frame and the 3D scene */
.sign__frame {
  --u: 1px;                 /* set by the script */
  --h: 430;                 /* the height of the frame in units, set by the script from the number of arrows */
  position: relative;
  width: calc(var(--u) * 440);
  height: calc(var(--u) * var(--h));
  perspective: calc(var(--u) * 1150);
  perspective-origin: 50% 34%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.sign__scene {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: 50% calc(var(--u) * 8);
}

/* ---------------------------------------------------------------- the post */
/* the post is a window (its height set by the script) with the whole length of wood inside, pinned to its bottom:
   as the window grows, the wood slides down out of the board, its pointed end first */
.pole {
  position: absolute;
  left: calc(50% - var(--u) * 11);
  top: calc(var(--u) * 8);
  width: calc(var(--u) * 22);
  height: calc(var(--u) * 86);
  overflow: hidden;
}

.pole__wood {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: calc(var(--u) * 460);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='400'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.32 .008' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .16 0 0 0 0 .08 0 0 0 0 .03 0 0 0 1.5 -.62'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / 100% calc(var(--u) * 200),
    linear-gradient(90deg, var(--post-dark) 0%, var(--post) 26%, color-mix(in oklab, var(--post) 72%, #ffe2b8) 40%, var(--post) 58%, color-mix(in oklab, var(--post) 55%, var(--post-dark)) 82%, var(--post-dark) 100%);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--u) * 12), 50% 100%, 0 calc(100% - var(--u) * 12));
}

.cap {
  position: absolute;
  left: calc(50% - var(--u) * 17);
  top: 0;
  width: calc(var(--u) * 34);
  height: calc(var(--u) * 14);
  transform: translateZ(1px);
}

/* ---------------------------------------------------------------- the board: the menu button */
.board {
  position: absolute;
  left: calc(50% - var(--u) * 88);
  top: calc(var(--u) * 14);
  width: calc(var(--u) * 176);
  height: calc(var(--u) * 60);
  padding: 0;
  border: 0;
  background: none;
  color: var(--oak-ink);
  font: inherit;
  cursor: pointer;
  outline: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

.board__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--u) * 14));
}

/* the faces and the slices of every board */
.board__face,
.slab,
.face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.board__face {
  display: grid;
  place-items: center;
  overflow: hidden;
  border-radius: calc(var(--u) * 8);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='360' height='60'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.006 .3' numOctaves='3' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .16 0 0 0 0 .05 0 0 0 1.6 -.66'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") 0 0 / calc(var(--u) * 360) 100%,
    linear-gradient(180deg, color-mix(in oklab, var(--oak) 80%, #fff4dc) 0%, var(--oak) 30%, color-mix(in oklab, var(--oak) 84%, var(--edge)) 100%);
  box-shadow: inset 0 0 0 calc(var(--u) * 1.5) color-mix(in oklab, var(--oak) 70%, var(--edge));
  transform: translateZ(calc(var(--u) * 3.5));
}

.board__face--back {
  transform: rotateY(180deg) translateZ(calc(var(--u) * 3.5));
}

.board__word {
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 27);
  font-weight: 780;
  line-height: 1;
  letter-spacing: 0.01em;
  font-variation-settings: 'INFM' 40, 'BNCE' 0;
  color: var(--oak-ink);
  /* burnt in: a dark core with a scorched halo */
  text-shadow:
    0 0 calc(var(--u) * 1.2) color-mix(in oklab, var(--oak-ink) 60%, transparent),
    0 calc(var(--u) * 1) 0 color-mix(in oklab, var(--oak) 60%, #fff6e2);
}

.board__face--front .board__word {
  font-variation-settings: 'INFM' var(--infm, 40), 'BNCE' var(--bnce, 0);
}

.board:focus-visible .board__face {
  box-shadow:
    inset 0 0 0 calc(var(--u) * 1.5) color-mix(in oklab, var(--oak) 70%, var(--edge)),
    inset 0 0 0 calc(var(--u) * 4) var(--focus);
}

/* the shade every face takes as it turns away from the light (the script sets its opacity) */
.shade {
  position: absolute;
  inset: 0;
  background: #1c0e04;
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.slab {
  border-radius: calc(var(--u) * 8);
  background: var(--edge);
}

/* ---------------------------------------------------------------- the arrows */
.arms {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.arms li {
  display: contents;
}

/* every arrow is a link, flat and still where the arrow rests: the board that moves is its body */
.arm {
  --side: 1;
  position: absolute;
  left: calc(50% - var(--u) * 14);
  top: calc(var(--u) * (96 + var(--row, 0) * 60));
  width: calc(var(--u) * 204);
  height: calc(var(--u) * 48);
  color: var(--ink);
  outline: none;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

.arm--left {
  --side: -1;
  left: calc(50% - var(--u) * 190);
}

.arm__body {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
  transform-origin: calc(var(--u) * 14) 50%;
}

.arm--left .arm__body {
  transform-origin: calc(100% - var(--u) * 14) 50%;
}

/* the shape of an arrow: square at the post, pointed at the far end */
.arm .face,
.arm .slab {
  border-radius: 0;
  clip-path: polygon(calc(var(--u) * 3) 0, calc(100% - var(--u) * 26) 0, 100% 50%, calc(100% - var(--u) * 26) 100%, calc(var(--u) * 3) 100%, 0 calc(100% - var(--u) * 3), 0 calc(var(--u) * 3));
}

.arm--left .face,
.arm--left .slab {
  clip-path: polygon(calc(100% - var(--u) * 3) 0, calc(var(--u) * 26) 0, 0 50%, calc(var(--u) * 26) 100%, calc(100% - var(--u) * 3) 100%, 100% calc(100% - var(--u) * 3), 100% calc(var(--u) * 3));
}

.arm .slab {
  background: color-mix(in oklab, var(--paint) 30%, var(--edge));
}

/* the paint, worn a little, with the grain of the wood coming through it */
.face {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 0 calc(var(--u) * 34) 0 calc(var(--u) * 30);
  overflow: hidden;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='50'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .34' numOctaves='3' seed='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .12 0 0 0 0 .06 0 0 0 0 .02 0 0 0 1.5 -.68'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E") var(--grain-x, 0) 0 / calc(var(--u) * 420) 100%,
    linear-gradient(180deg, color-mix(in oklab, var(--paint) 78%, #fff3dc) 0%, var(--paint) 26%, var(--paint) 70%, color-mix(in oklab, var(--paint) 80%, #120802) 100%);
  transform: translateZ(calc(var(--u) * 3.5));
}

.arm--left .face {
  align-items: flex-end;
  padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 34);
}

/* the back of an arrow is turned over its long side, so it reads the right way up when the arrow flips */
.face--back {
  transform: rotateX(180deg) translateZ(calc(var(--u) * 3.5));
}

/* the iron strap that holds the arrow to the post */
.strap {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--u) * 6);
  width: calc(var(--u) * 16);
  background: linear-gradient(90deg, color-mix(in oklab, var(--strap) 80%, #000000), color-mix(in oklab, var(--strap) 70%, #a49a90) 40%, var(--strap) 70%, color-mix(in oklab, var(--strap) 80%, #000000));
  box-shadow: calc(var(--u) * 1.5) 0 calc(var(--u) * 2) rgba(10, 5, 0, 0.35), calc(var(--u) * -1.5) 0 calc(var(--u) * 2) rgba(10, 5, 0, 0.35);
}

.arm--left .strap {
  left: auto;
  right: calc(var(--u) * 6);
}

.arm__label,
.face__label {
  position: relative;
  z-index: 1;
  font-size: calc(var(--u) * 20);
  font-weight: 720;
  line-height: 1;
  letter-spacing: 0.005em;
  white-space: nowrap;
  font-variation-settings: 'INFM' var(--infm, 30), 'BNCE' var(--bnce, 0);
  text-shadow: 0 calc(var(--u) * 1) 0 color-mix(in oklab, var(--paint) 55%, #000000);
}

.face__here {
  position: relative;
  z-index: 1;
  display: none;
  margin-top: calc(var(--u) * 4);
  font-size: calc(var(--u) * 10.5);
  font-weight: 560;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.86;
}

.arm[aria-current='page'] .face__here {
  display: block;
}

.arm:focus-visible .face {
  box-shadow: inset 0 0 0 calc(var(--u) * 3.5) var(--focus);
}

/* folded away and not yet reached by the post */
.arm.is-away {
  visibility: hidden;
}