/* The clothesline menu: a menu pegged on a washing line, alone on a white page. The script works out the line and
   swings the labels; the CSS draws the labels (linen with a fine weave and a stitched edge), the wooden pegs and the
   indigo dye of the current page. */
:root {
  --page: #ffffff;          /* the page */
  --ink: #1d2747;           /* the words on the labels */
  --linen: #f7f4ec;         /* the labels */
  --weave: #e4ddcd;         /* the threads woven into them */
  --stitch: #b9ad95;        /* the stitches round their edge */
  --dye: #263a7a;           /* the indigo of the label you are on */
  --dye-ink: #f3efe4;       /* the words on the dyed label */
  --wood: #dcbb8b;          /* the pegs */
  --wood-dark: #a9844f;
  --spring: #8d96a3;        /* the metal spring of the pegs */
  --rope: #8a7a61;          /* the washing line */
}

* {
  box-sizing: border-box;
}

html {
  touch-action: manipulation;
}

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

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

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

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

/* ---------------------------------------------------------------- the line */
.line {
  position: relative;
  width: min(960px, 100%);
  height: 262px;
}

.line__rope {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* its own layer: redrawn every frame, it must not make anything under it repaint too */
  will-change: transform;
}

.rope__shadow {
  fill: none;
  stroke: rgba(29, 39, 71, 0.07);
  stroke-width: 5;
  stroke-linecap: round;
}

.rope__cord {
  fill: none;
  stroke: var(--rope);
  stroke-width: 2.6;
  stroke-linecap: round;
}

/* the twist of the cord: short darker dashes along it */
.rope__twist {
  fill: none;
  stroke: color-mix(in srgb, var(--rope) 70%, #2a2117);
  stroke-width: 2.6;
  stroke-dasharray: 1.4 3.2;
  stroke-linecap: butt;
  opacity: 0.55;
}

.rope__shine {
  fill: none;
  stroke: rgba(255, 250, 238, 0.45);
  stroke-width: 0.8;
  transform: translateY(-0.7px);
}

/* the two brass rings the line is tied to */
.rope__ring {
  fill: none;
  stroke: #b08a3e;
  stroke-width: 2.4;
}

.rope__plate {
  fill: #c9a457;
  stroke: #8c6a28;
  stroke-width: 0.8;
}

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

/* ---------------------------------------------------------------- the labels */
.tag {
  --w: 104px;
  position: absolute;
  top: 0;
  left: 0;
  width: var(--w);
  margin-left: calc(var(--w) / -2);
  padding-top: 18px;
  transform-origin: 50% 0;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  will-change: transform;
}

.tag__cloth {
  position: relative;
  display: block;
  height: 120px;
  border-radius: 3px 3px 5px 5px;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, color-mix(in srgb, var(--weave) 55%, transparent) 2px 3px),
    repeating-linear-gradient(0deg, transparent 0 2px, color-mix(in srgb, var(--weave) 45%, transparent) 2px 3px),
    var(--linen);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 -10px 18px -14px rgba(60, 50, 30, 0.25) inset,
    0 14px 22px -12px rgba(29, 39, 71, 0.35),
    0 2px 4px rgba(29, 39, 71, 0.08);
  overflow: hidden;
}

/* the stitched edge, and a fold of shade under the peg */
.tag__cloth::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1.2px dashed var(--stitch);
  border-radius: 2px 2px 3px 3px;
  pointer-events: none;
}

.tag__cloth::after {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 22px;
  background: linear-gradient(180deg, rgba(60, 50, 30, 0.16), transparent);
  pointer-events: none;
}

.tag__face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding-top: 12px;
  color: var(--ink);
}

.tag__care {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.8;
}

.tag__name {
  font-size: 15.5px;
  font-weight: 620;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* the indigo dye: the same face again, coloured, cut by a wavy line the script moves */
.tag__dye {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    repeating-linear-gradient(90deg, transparent 0 2px, rgba(255, 255, 255, 0.05) 2px 3px),
    repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 20, 0.08) 2px 3px),
    var(--dye);
  clip-path: inset(100% 0 0 0);
}

.tag__dye .tag__face {
  color: var(--dye-ink);
}

/* the peg sits over the line, its jaws on the top of the label */
.tag__peg {
  position: absolute;
  top: -12px;
  left: 50%;
  z-index: 2;
  width: 18px;
  height: 44px;
  margin-left: -9px;
  overflow: visible;
}

.peg__shade {
  fill: rgba(29, 39, 71, 0.16);
}

.peg__wood {
  fill: var(--wood);
  stroke: var(--wood-dark);
  stroke-width: 0.7;
}

.peg__wood--back {
  fill: color-mix(in srgb, var(--wood) 86%, var(--wood-dark));
}

.peg__grain {
  fill: none;
  stroke: var(--wood-dark);
  stroke-width: 0.6;
  stroke-linecap: round;
  opacity: 0.45;
}

.peg__spring {
  fill: var(--spring);
  stroke: color-mix(in srgb, var(--spring) 60%, #000);
  stroke-width: 0.6;
}

.peg__coil {
  fill: none;
  stroke: rgba(255, 255, 255, 0.55);
  stroke-width: 0.8;
}

.tag:focus-visible .tag__cloth {
  outline: 2px solid var(--dye);
  outline-offset: 4px;
}

@media (max-width: 640px) {
  .line {
    height: 200px;
  }

  .tag {
    --w: 58px;
    padding-top: 15px;
  }

  .tag__cloth {
    height: 92px;
  }

  .tag__cloth::before {
    inset: 4px;
  }

  .tag__face {
    gap: 7px;
    padding-top: 10px;
  }

  .tag__care {
    width: 19px;
    height: 19px;
  }

  .tag__name {
    font-size: 11.5px;
  }

  .tag__peg {
    top: -10px;
    width: 15px;
    height: 37px;
    margin-left: -7.5px;
  }
}