:root {
  --ink: #f3eadc;
  --muted: #b5a48e;
  --paper: #f3eadc;
  --wash: #1a1612;
  --face: #6e5228;
  --line: #e0c17a;
  /* Labels sitting in the open wheel. */
  --on-face: #f3eadc;
  --sans: Almendra, Palatino, "Palatino Linotype", serif;
  --serif: "IM Fell English", Georgia, "Times New Roman", serif;
  --display: Almendra, Palatino, "Palatino Linotype", serif;
  /* How far the cog centre sits past the left edge, as a share of its diameter.
     Far enough that the hub is off-screen and one opening remains. */
  --cog-shift: 0.19;
  --cog-size: 160vh;
  /* How much of the right-hand cog shows, as a share of its diameter. */
  --echo-peek: 0.08;
  /* An opening already faces right, which is where the menu sits. */
  --cog-base: 0deg;
  /* Middle of an opening, as a share of the cog's diameter. */
  --menu-orbit: 0.256;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--wash);
  font-family: var(--serif);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  z-index: 5;
  padding: 0.35rem 0.55rem;
  background: var(--line);
  color: var(--wash);
  text-decoration: none;
}

.skip:focus {
  top: 1rem;
}

.stage {
  position: relative;
  min-height: 100vh;
  background-color: var(--wash);
  background-image:
    linear-gradient(rgb(26 22 18 / 0.72), rgb(26 22 18 / 0.72)),
    url("images/gears-bg.jpg");
  background-size: cover;
  background-position: center;
}

.cog-slot {
  position: fixed;
  z-index: 3;
  left: calc(var(--cog-size) * var(--cog-shift) * -1);
  top: 50%;
  width: var(--cog-size);
  height: var(--cog-size);
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.cog-echo {
  position: fixed;
  z-index: 3;
  left: calc(100% - var(--cog-size) * var(--echo-peek));
  top: 50%;
  width: var(--cog-size);
  height: var(--cog-size);
  transform: translateY(-50%);
  pointer-events: none;
}

.cog-art {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.cog {
  display: block;
  width: 100%;
  height: 100%;
  transform-origin: 50% 50%;
  will-change: transform;
}

.menu-rotor {
  position: absolute;
  inset: 0;
  z-index: 1;
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform;
}

.nav {
  position: absolute;
  z-index: 1;
  /* Placed on the cog centre, then swung out to the middle of an opening. */
  left: 50%;
  top: 50%;
  width: max-content;
  max-width: 16rem;
  height: auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin: 0;
  padding: 0;
  pointer-events: none;
  background: transparent;
  border: none;
  transform-origin: 0 0;
  transform: rotate(var(--menu-spin, 0deg)) translateX(calc(var(--cog-size) * var(--menu-orbit)))
    translate(-50%, -50%);
}

.nav.is-facing {
  pointer-events: auto;
}

.turn {
  display: none;
}

.nav-list {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: 0.4rem;
  align-items: stretch;
  align-self: flex-start;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  padding: 0.4rem 0.5rem;
  overflow: visible;
  background: transparent;
  /* Letters turn with the cog. On a phone the gear is swung so an opening
     faces up; undo only that fixed swing, so a menu that has landed is readable. */
  transform: rotate(calc(var(--cog-base, 0deg) * -1));
  transform-origin: 50% 50%;
}

.nav-item {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
}

.nav-item a {
  color: var(--on-face);
  font-family: var(--display);
  font-size: clamp(1.05rem, 2.4vh, 1.4rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.nav-item a.is-current {
  border-bottom: 2px solid var(--on-face);
}

.open-tab {
  display: inline-flex;
  width: 1.35rem;
  height: 1.35rem;
  align-items: center;
  justify-content: center;
  color: var(--on-face);
}

.open-tab img,
.open-tab svg {
  width: 0.95rem;
  height: 0.95rem;
}

.panel {
  padding: 1.5rem 8vw 4rem calc(var(--cog-size) * (0.5 - var(--cog-shift)) + 2.5rem);
}

.slide {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(16rem, 0.9fr);
  gap: 2rem 2.5rem;
  align-items: center;
}

.frame {
  position: relative;
  display: grid;
  min-height: 16rem;
  aspect-ratio: 4 / 3;
  place-items: center;
  border: none;
  background: color-mix(in srgb, var(--wash) 78%, var(--face));
  color: var(--muted);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  overflow: hidden;
}

.frame img {
  position: absolute;
  /* Inner edge of the rules in Frame1, once the corner is drawn at 80% width. */
  top: 4.9%;
  left: 3.3%;
  width: calc(100% - 6.6%);
  height: calc(100% - 9.8%);
  object-fit: cover;
  object-position: 38% 12%;
}

.frame img.shot {
  object-position: center 28%;
}

/* Frame1 is one corner: gears plus the rules that run along two edges.
   The other three corners are that same picture, flipped. */
.ornament {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.ornament-corner {
  position: absolute;
  width: 80%;
  aspect-ratio: 1200 / 327;
  background-image: linear-gradient(160deg, #f3ddb0 0%, #c4964a 42%, #f0d7a0 70%, #8d6230 100%);
  -webkit-mask-image: url("images/Frame1.png");
  mask-image: url("images/Frame1.png");
  -webkit-mask-position: left top;
  mask-position: left top;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.ornament-tl {
  top: 0;
  left: 0;
}

.ornament-tr {
  top: 0;
  right: 0;
  transform: scaleX(-1);
}

.ornament-bl {
  bottom: 0;
  left: 0;
  transform: scaleY(-1);
}

.ornament-br {
  bottom: 0;
  right: 0;
  transform: scale(-1);
}

.frame-link {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

.visit {
  display: inline-block;
  margin-top: 1.35rem;
  padding: 0.45rem 0.95rem;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 700;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
}

.visit:hover {
  background: var(--face);
  border-color: var(--face);
  color: var(--paper);
}

.copy h1,
.copy h2 {
  margin: 0 0 0.75rem;
  color: var(--line);
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 700;
  line-height: 1;
}

.tagline {
  margin: 0;
  font-size: 1.2rem;
  font-style: italic;
}

.contact-line {
  margin-top: 0.85rem;
}

.copy p {
  max-width: 34rem;
  margin: 0.35rem 0 0;
}

:focus-visible {
  outline: 2px solid var(--line);
  outline-offset: 3px;
}

.cog-slot :focus-visible {
  outline-color: var(--on-face);
}

/* The dial takes over wheel, touch, and keys, so the page itself never scrolls. */
.is-dial,
.is-dial body {
  overflow: hidden;
  overscroll-behavior: none;
}

.is-dial .stage {
  position: fixed;
  inset: 0;
  min-height: 0;
  overflow: visible;
  pointer-events: none;
}

.is-dial .panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Equal top and bottom padding keeps the image centred on the cog axis. */
  padding: 7vh calc(var(--cog-size) * var(--echo-peek) + 2.5rem) 7vh
    calc(var(--cog-size) * (0.5 - var(--cog-shift)) + 2.5rem);
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transform: rotate(var(--panel-turn, 0deg));
  transform-origin: calc(var(--cog-size) * var(--cog-shift) * -1) 50%;
  will-change: transform, opacity;
}

/* A right-cog turn pivots on that cog, swings the other way, and mirrors
   the slide so the picture sits beside it. The class follows the turn. */
.is-dial .panel.is-right {
  transform: rotate(calc(var(--panel-turn, 0deg) * -1));
  transform-origin: calc(100% + var(--cog-size) * (0.5 - var(--echo-peek))) 50%;
}

.is-dial .panel.is-right .slide {
  grid-template-columns: minmax(16rem, 0.9fr) minmax(0, 1.05fr);
}

.is-dial .panel.is-right .slide > :first-child {
  order: 2;
}

.is-dial .panel.is-right .copy {
  justify-self: end;
  text-align: right;
}

.is-dial .panel.is-right .copy p {
  margin-left: auto;
}

.is-dial .panel.is-active {
  pointer-events: auto;
  opacity: 1;
  visibility: visible;
}

/* Phones: the cog sits below the screen so a band of teeth and brass
   shows along the bottom. */
@media (max-width: 800px) {
  :root {
    --band: min(64vw, 34svh);
    /* Large enough that the hub stays below the screen and the opening is tall enough for the menu. */
    --cog-size: calc(var(--band) * 3.28);
    --cog-drop: calc(var(--cog-size) / 2 - var(--band));
    /* Turn the right-facing opening up toward the menu.
       The hub is below the screen, so the names sit slightly outward of the
       opening's midpoint, in the part of the gap that stays visible. */
    --cog-base: -90deg;
    --menu-orbit: 0.266;
  }

  .cog-echo {
    display: none;
  }

  .cog-slot {
    top: auto;
    left: 50%;
    bottom: calc(var(--cog-drop) * -1);
    transform: translate(-50%, 50%);
  }

  .nav {
    /* The opening is narrower than on the desktop cog. */
    max-width: min(68vw, 16rem);
  }

  .nav-list {
    align-self: center;
    align-items: center;
    gap: 0.55rem;
    padding: 0.4rem 0.75rem;
  }

  .nav-item a {
    font-size: 0.95rem;
  }

  .nav-item {
    position: relative;
    max-width: 100%;
  }

  .nav-item .open-tab {
    position: absolute;
    left: 100%;
  }

  .copy,
  .is-dial .panel.is-right .copy {
    justify-self: center;
    text-align: center;
  }

  .copy p {
    margin-inline: auto;
  }

  .copy .visit {
    display: block;
    width: fit-content;
    margin-inline: auto;
  }

  .turn {
    position: absolute;
    top: calc(var(--band) / 2);
    display: grid;
    width: 2rem;
    height: 2rem;
    place-items: center;
    padding: 0;
    border: none;
    background: transparent;
    /* Ivory reads in a tooth gap; the shadow keeps it visible on the brass. */
    color: var(--paper);
    text-shadow: 0 0 2px #1a1612, 0 1px 1px #1a1612;
    font-family: var(--sans);
    font-size: 1.6rem;
    line-height: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }

  .turn-prev {
    left: calc(var(--cog-size) / 2 - 50vw + 0.7rem);
  }

  .turn-next {
    left: calc(var(--cog-size) / 2 + 50vw - 2.7rem);
  }

  .panel,
  .is-dial .panel {
    padding: 1.25rem 1.25rem calc(var(--band) + 1.25rem);
  }

  /* Swipes go sideways between sections; up and down scrolls within one. */
  .is-dial .panel,
  .is-dial .panel.is-right {
    justify-content: flex-start;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    transform: rotate(var(--panel-turn, 0deg));
    transform-origin: 50% calc(100% + var(--cog-drop));
  }

  .is-dial .slide {
    margin-block: auto;
  }

  .slide,
  .is-dial .panel.is-right .slide {
    grid-template-columns: 1fr;
  }

  .is-dial .panel.is-right .slide > :first-child {
    order: 0;
  }

  .frame-link,
  .slide > .frame {
    width: min(100%, calc(32svh * 4 / 3));
    justify-self: center;
  }

  .frame {
    min-height: 10rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .is-dial .stage,
  .is-dial .nav {
    transition: background-color 220ms linear;
  }
}