/* The rotary dial menu: the sections of a site engraved round the black ring of a camera dial, on a black page. The
   knurled edge and the engraving turn; the light on the metal stays where it is. */
:root {
  --page: #000000;          /* the page */
  --index: #ff5232;         /* the index over the dial, its line in the lens and the ring of the focus */
  --paint: #ece8df;         /* the engraving on the ring */
  --face: #141312;          /* the black ring */
  --knurl-a: #2c2b29;       /* the teeth of the edge */
  --knurl-b: #0b0b0a;
  --hub: #d4d2cc;           /* the silver middle */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--paint);
  font-family: 'Archivo Variable', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

p {
  margin: 0;
}

.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 dial */
/* every measure of the dial is in units of a 360 wide drawing, so that it keeps its look at any size */
.dial {
  --size: min(380px, calc(100vw - 40px));
  --u: calc(var(--size) / 360);
  --zoom: 1.8;              /* set by the script */
  position: relative;
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
}

.dial.is-held {
  cursor: grabbing;
}

/* the shadow the dial casts on the page, and the dark seam where it meets it */
.dial__well {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 calc(var(--u) * 2) rgba(0, 0, 0, 0.55),
    0 calc(var(--u) * 3) calc(var(--u) * 4) rgba(0, 0, 0, 0.7),
    0 calc(var(--u) * 34) calc(var(--u) * 60) calc(var(--u) * -14) rgba(0, 0, 0, 0.85);
}

.dial__body {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}

/* the knurled edge: teeth that turn with the dial, under a light that does not */
.dial__knurl,
.dial__ticks {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.knurl__base {
  fill: var(--knurl-b);
}

.knurl__tooth {
  fill: var(--knurl-a);
}

.dial__rimlight {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: conic-gradient(from -70deg,
    rgba(255, 255, 255, 0.5),
    rgba(255, 255, 255, 0.04) 55deg,
    rgba(0, 0, 0, 0.35) 120deg,
    rgba(0, 0, 0, 0.5) 175deg,
    rgba(255, 255, 255, 0.16) 225deg,
    rgba(255, 255, 255, 0.02) 280deg,
    rgba(255, 255, 255, 0.5) 360deg);
  box-shadow:
    inset 0 calc(var(--u) * 1.5) 0 rgba(255, 255, 255, 0.28),
    inset 0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.5);
}

/* the bright bevel between the edge and the ring */
.dial__chamfer {
  position: absolute;
  inset: calc(var(--u) * 14);
  border-radius: 50%;
  background: conic-gradient(from -45deg,
    #f2f0ea,
    #6c6a65 70deg,
    #252422 160deg,
    #7d7b76 235deg,
    #c9c7c1 300deg,
    #f2f0ea 360deg);
  box-shadow: 0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.6);
}

/* the black ring, anodised, with a faint brushed sheen that stays with the light */
.dial__face {
  position: absolute;
  inset: calc(var(--u) * 20);
  border-radius: 50%;
  background:
    conic-gradient(from -45deg,
      rgba(255, 255, 255, 0.07),
      rgba(255, 255, 255, 0) 45deg,
      rgba(255, 255, 255, 0.035) 90deg,
      rgba(255, 255, 255, 0) 135deg,
      rgba(255, 255, 255, 0.07) 180deg,
      rgba(255, 255, 255, 0) 225deg,
      rgba(255, 255, 255, 0.035) 270deg,
      rgba(255, 255, 255, 0) 315deg,
      rgba(255, 255, 255, 0.07) 360deg),
    radial-gradient(circle, #1b1a18 55%, var(--face) 100%);
  box-shadow:
    inset 0 calc(var(--u) * 2) calc(var(--u) * 3) rgba(0, 0, 0, 0.75),
    inset 0 calc(var(--u) * -1) 0 rgba(255, 255, 255, 0.07);
}

/* the engraving: ticks and words, turning with the dial; the turning layers get their own layer on the graphics
   card, so that a turn is a rotation of a picture, not a new painting */
.dial__turn {
  position: absolute;
  inset: 0;
}

.dial__turn,
.dial__knurl {
  will-change: transform;
}

.tick {
  stroke: var(--paint);
  stroke-width: 1.2;
  stroke-linecap: round;
  opacity: 0.38;
}

.tick--major {
  stroke-width: 2;
  opacity: 0.9;
}

.tick--ring {
  fill: none;
  stroke: var(--paint);
  stroke-width: 0.8;
  opacity: 0.16;
}

.dial__items {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* each word sits at its angle on the ring, its middle on the circle of radius 130 */
.dial__item {
  position: absolute;
  left: 50%;
  top: 50%;
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
  color: var(--paint);
  font-size: calc(var(--u) * 13);
  font-weight: 560;
  font-stretch: 78%;
  letter-spacing: 0.16em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
  text-shadow: 0 calc(var(--u) * -0.8) 0 rgba(0, 0, 0, 0.9);
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(calc(var(--u) * -130));
  opacity: 0.62;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-drag: none;
  cursor: pointer;
}

/* the word at the top is lit; the others are quieter */
.dial__item.is-on {
  color: #ffffff;
  opacity: 1;
}

@media (hover: hover) {
  .dial__item:hover {
    color: #ffffff;
    opacity: 0.9;
  }
}


/* the silver middle, turned on a lathe: fine rings, and a sheen in four petals */
.dial__hub {
  position: absolute;
  inset: calc(var(--u) * 76);
  display: grid;
  place-content: center;
  justify-items: center;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, rgba(255, 255, 255, 0.08) 0 0.6px, rgba(0, 0, 0, 0.05) 0.6px 1.7px),
    conic-gradient(from 20deg,
      var(--hub),
      #8e8c87 45deg,
      #eeede8 95deg,
      #7c7a76 150deg,
      var(--hub) 200deg,
      #8e8c87 225deg,
      #eeede8 275deg,
      #7c7a76 330deg,
      var(--hub) 360deg);
  box-shadow:
    0 0 0 calc(var(--u) * 1.5) rgba(0, 0, 0, 0.7),
    0 calc(var(--u) * 5) calc(var(--u) * 12) rgba(0, 0, 0, 0.6),
    inset 0 calc(var(--u) * 1.5) 0 rgba(255, 255, 255, 0.75),
    inset 0 calc(var(--u) * -3) calc(var(--u) * 6) rgba(0, 0, 0, 0.28);
  color: #1d1c1a;
  pointer-events: none;
}

.dial__iris {
  width: calc(var(--u) * 92);
  height: calc(var(--u) * 92);
  overflow: visible;
}

/* the engraving: a dark cut, with the light catching its lower lip */
.iris__lip,
.iris__cut {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.iris__lip {
  stroke: rgba(255, 255, 255, 0.75);
  stroke-width: 2.4;
  transform: translateY(1px);
}

.iris__cut {
  stroke: #3a3936;
  stroke-width: 2.2;
}

/* the window over the top of the ring: a lens like a watch's cyclops, with the dial magnified inside */
.dial__lens {
  position: absolute;
  left: calc(var(--u) * 102);
  top: calc(var(--u) * 18);
  width: calc(var(--u) * 156);
  height: calc(var(--u) * 60);
  overflow: hidden;
  border-radius: 999px;
  background: var(--face);
  box-shadow:
    0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.8),
    0 calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * -4) rgba(0, 0, 0, 0.85);
  pointer-events: none;
  transition: box-shadow 0.2s;
}

.dial__zoom {
  position: absolute;
  left: calc(var(--u) * -102);
  top: calc(var(--u) * -18);
  width: var(--size);
  height: var(--size);
  transform-origin: calc(var(--u) * 180) calc(var(--u) * 48);
  transform: scale(var(--zoom));
}

/* the glass: a curved highlight across the top, the edges darker where the lens bends, a hairline in the middle */
.dial__glass {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    linear-gradient(90deg, transparent calc(50% - 0.5px), color-mix(in srgb, var(--index) 75%, transparent) calc(50% - 0.5px) calc(50% + 0.5px), transparent calc(50% + 0.5px)) 50% 0 / 100% 18% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.24), rgba(255, 255, 255, 0.05) 42%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(90% 130% at 50% 45%, transparent 58%, rgba(0, 0, 0, 0.55) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.16),
    inset 0 1.5px 1px rgba(255, 255, 255, 0.35),
    inset 0 calc(var(--u) * -6) calc(var(--u) * 10) rgba(0, 0, 0, 0.35);
}

/* the index: a small red pawl over the edge that rides the notches */
.dial__pawl {
  position: absolute;
  left: 50%;
  top: calc(var(--u) * -9);
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 13);
  margin-left: calc(var(--u) * -7);
  background: var(--index);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  filter: drop-shadow(0 calc(var(--u) * 2) calc(var(--u) * 2) rgba(0, 0, 0, 0.6));
  transform-origin: 50% 0;
  pointer-events: none;
}

/* the focus of the keys shows on the lens, where the chosen section is */
.dial.is-focus .dial__lens {
  box-shadow:
    0 0 0 calc(var(--u) * 1) rgba(0, 0, 0, 0.8),
    0 0 0 3px var(--index),
    0 calc(var(--u) * 10) calc(var(--u) * 18) calc(var(--u) * -4) rgba(0, 0, 0, 0.85);
}

/* ---------------------------------------------------------------- phone */
@media (max-width: 760px) {
  .dial {
    --size: min(340px, calc(100vw - 48px));
  }
}