/* The masking tape nav: an illustrator's links on a white page, the current one on a strip of masking tape. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1d1a16;           /* the current link, and the one pointed at */
  --muted: #7a736a;         /* the other links */
  --tape: #efe2bd;          /* the masking tape */
  --tape-back: #e4d6b1;     /* the back of the tape, on the side that sticks */
  --tape-edge: #fffaf0;     /* the fibres along a torn end */
  --core: #c9a46e;          /* the cardboard core of the roll */
}

* {
  box-sizing: border-box;
}

/* a tap is a click at once: no wait for a double tap */
html {
  touch-action: manipulation;
}

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

body {
  min-height: 100svh;
  background: var(--page);
  color: var(--ink);
  font-family: 'Fraunces Variable', Georgia, serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100svh;
  display: grid;
  place-items: center;
  padding: 32px 16px;
}

.mt__defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* the nav: the tape and the roll lie on the desk, under the words */
.mt {
  position: relative;
  padding: clamp(40px, 6vw, 64px) clamp(14px, 4vw, 56px);
  font-size: clamp(19px, 3vw, 38px);
}

.mt__desk {
  position: absolute;
  inset: 0;
  perspective: 700px;
  pointer-events: none;
}

.mt__list {
  position: relative;
  z-index: 1;
  display: flex;
  gap: clamp(10px, 3vw, 40px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mt__link {
  display: block;
  padding: 12px clamp(4px, 0.8vw, 10px);
  border-radius: 6px;
  color: var(--muted);
  font-weight: 430;
  font-variation-settings: 'opsz' 72, 'SOFT' 50;
  letter-spacing: -0.015em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}

.mt__word {
  display: inline-block;
}

.mt__link[aria-current='page'] {
  color: var(--ink);
}

@media (hover: hover) {
  .mt__link:hover {
    color: var(--ink);
  }
}

.mt__link:active .mt__word {
  transform: translateY(1px);
}

.mt__link:focus {
  outline: none;
}

.mt__link:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ---------------------------------------------------------------- a strip of tape */
/* a box the size of the strip; the strip is drawn twice in it, the part still stuck and the part peeling, each cut
   along the fold line by a clip-path */
.tape {
  position: absolute;
  left: 0;
  top: 0;
  transform-style: preserve-3d;
  transform-origin: 50% 50%;
  will-change: transform;
}

.tape__part {
  position: absolute;
  inset: 0;
  transform-origin: 0 0;
}

.tape__cut {
  position: absolute;
  inset: 0;
}

/* the clip is on a box inside the turning one: Chrome can drop a clip-path set on the element that turns in 3D */
.tape__part svg {
  position: absolute;
  inset: 0;
  overflow: visible;
}

.tape__body {
  fill: var(--tape);
  opacity: 0.84;
}

.tape__back {
  fill: var(--tape-back);
  opacity: 0;
}

.tape__fibre {
  opacity: 1;
}

.tape__torn {
  fill: none;
  stroke: var(--tape-edge);
  stroke-width: 1.1;
  stroke-linejoin: round;
  opacity: 0.95;
}

.tape__hair {
  fill: none;
  stroke: var(--tape-edge);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.9;
}

.tape__shadow {
  fill: #5a4218;
  opacity: 0.2;
}

.tape__wrinkle {
  fill: none;
  stroke-linecap: round;
  stroke-width: 1.2;
}

.tape__wrinkle--light {
  stroke: #ffffff;
  opacity: 0.7;
}

.tape__wrinkle--dark {
  stroke: #6b4f1d;
  opacity: 0.22;
}

.tape__shade {
  fill: #2a1d08;
  opacity: 0;
}

/* lifted off the paper, the part that turns casts a soft shadow */
.tape__cut.is-up {
  filter: drop-shadow(0 3px 3px rgba(60, 40, 10, 0.22));
}

/* ---------------------------------------------------------------- the roll */
/* a roll of tape lying flat on the desk: the ring of tape, its cardboard core and the hole through the middle */
.roll {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.roll__art {
  position: absolute;
  left: -1.15em;
  top: -1.15em;
  width: 2.3em;
  height: 2.3em;
  overflow: visible;
}

.roll__shadow {
  fill: #3d2c10;
  opacity: 0.22;
}

.roll__tape {
  fill: var(--tape);
}

.roll__layers {
  fill: none;
  stroke: #9c7a3c;
  stroke-width: 0.5;
  opacity: 0.22;
}

.roll__core {
  fill: var(--core);
}

.roll__core-edge {
  fill: none;
  stroke: #8d6a36;
  stroke-width: 0.8;
  opacity: 0.6;
}

.roll__lip {
  fill: none;
  stroke: #a9874a;
  stroke-width: 0.9;
  stroke-linecap: round;
  opacity: 0.7;
}

.roll__light {
  fill: none;
  stroke: #ffffff;
  stroke-width: 2.4;
  stroke-linecap: round;
  opacity: 0.55;
}