/* The puffer menu: the menu of a shop of outdoor clothing, quilted like a down jacket, alone on a white page. The
   quilt is drawn by the script in the svg, channel by channel; the links are real links laid on the channels. On a
   real site the button sits in the header and the quilt drops below it. */
:root {
  --page: #ffffff;          /* the page */
  --nylon: #ff6a2b;         /* the nylon of the jacket */
  --nylon-deep: #c9431a;    /* the nylon where it dips into a seam */
  --stitch: #8e2c0c;        /* the stitching */
  --label: #ffffff;         /* the names on the channels */
  --note: #ffe2d3;          /* the line beside each name */
}

* {
  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(--label);
  font-family: 'Archivo Variable', 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

a,
button {
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}

a:focus,
button:focus {
  outline: 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: 24px 16px;
}

/* ---------------------------------------------------------------- the frame */
.shop {
  position: relative;
  width: min(330px, 100%);
  height: 470px;
}

/* ---------------------------------------------------------------- the button */
/* a little quilted pill of the same nylon; the script moves it (in the middle closed, at the top open) */
.puff {
  position: absolute;
  left: 50%;
  top: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 11px;
  height: 52px;
  margin: 0;
  padding: 0 24px 0 20px;
  border: 0;
  border-radius: 999px;
  background:
    radial-gradient(120% 90% at var(--shine, 35%) 18%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    linear-gradient(180deg, var(--nylon) 0%, var(--nylon) 55%, var(--nylon-deep) 100%);
  color: var(--label);
  font: inherit;
  font-size: 16px;
  font-weight: 640;
  font-variation-settings: 'wdth' 108;
  letter-spacing: 0.01em;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  box-shadow: inset 0 -3px 6px rgba(120, 30, 0, 0.25), inset 0 2px 3px rgba(255, 255, 255, 0.35), 0 12px 20px -12px rgba(201, 67, 26, 0.9);
}

/* the running stitch round the button */
.puff::before {
  content: '';
  position: absolute;
  inset: 5px;
  border: 1.2px dashed rgba(142, 44, 12, 0.45);
  border-radius: inherit;
  pointer-events: none;
}

.puff:focus-visible {
  outline: 2px solid var(--nylon-deep);
  outline-offset: 4px;
}

.puff__icon {
  position: relative;
  width: 20px;
  height: 16px;
  flex: none;
  overflow: visible;
}

.puff__icon rect {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.4;
}

/* Menu and Close share one place; the word that is not shown waits below it, out of the mask */
.puff__words {
  position: relative;
  display: grid;
  overflow: clip;
  height: 1.35em;
  line-height: 1.35em;
}

.puff__word {
  grid-area: 1 / 1;
}

/* ---------------------------------------------------------------- the quilt */
.quilt {
  position: absolute;
  left: 50%;
  top: 66px;
  z-index: 2;
  width: min(300px, 100%);
  transform: translateX(-50%);
  visibility: hidden;
}

.quilt.is-open {
  visibility: visible;
}

.quilt__fabric {
  display: block;
  width: 100%;
  overflow: visible;
  filter: drop-shadow(0 16px 18px rgba(170, 60, 20, 0.26)) drop-shadow(0 2px 3px rgba(120, 40, 10, 0.18));
}

.quilt__list {
  display: contents;
}

/* each link is laid by the script on its channel */
.channel {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 46px;
  padding: 0 22px 0 26px;
  margin-top: -23px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  text-shadow: 0 1px 1px rgba(120, 30, 0, 0.25);
}

.channel__name {
  position: relative;
  padding: 3px 8px;
  margin-left: -8px;
  border-radius: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: 0.005em;
  font-variation-settings: 'wdth' 100;
  transition: font-variation-settings 0.5s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.channel__note {
  margin-left: auto;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--note);
  transition: transform 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.channel__arrow {
  width: 15px;
  height: 15px;
  flex: none;
  fill: none;
  stroke: var(--label);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0;
  transform: translateX(-8px);
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.34, 1.7, 0.5, 1);
}

.channel.is-here .channel__name {
  font-variation-settings: 'wdth' 122;
}

.channel.is-here .channel__arrow {
  opacity: 1;
  transform: none;
}

.channel.is-here .channel__note {
  transform: translateX(-2px);
}

/* the page you are on: its name sewn on like a patch, with a running stitch round it */
.channel[aria-current='page'] .channel__name::before {
  content: '';
  position: absolute;
  inset: 0;
  border: 1.3px dashed rgba(255, 255, 255, 0.85);
  border-radius: inherit;
}

/* the focus from the keyboard: a solid white line round the name */
.channel:focus-visible .channel__name {
  outline: 2px solid var(--label);
  outline-offset: 2px;
}

@media (max-width: 420px) {
  .channel__name {
    font-size: 18px;
  }
}