:root {
  --bg: #ffffff;          /* the page */
  --ink: #22303c;         /* the button, the typed words, the knobs */
  --coral: #e2603f;       /* coral: the Work divider */
  --mustard: #e8b53b;     /* mustard: the Printing divider, the brass */
  --teal: #1f7a72;        /* teal: the Papers divider */
  --sky: #5a9fd6;         /* sky blue: the Workshops divider, the ruled lines */
  --olive: #869c3c;       /* olive: the Journal divider */
  --plum: #8a4f8f;        /* plum: the Studio divider */
  --rose: #e48aa0;        /* rose: the Contact divider */
  --card: #fbf5e6;        /* the cream of the cards */
  --walnut: #6b4226;      /* the wooden base */
  --chrome: #d7dce1;      /* chrome: legs, rails, hubs */
}

* { box-sizing: border-box; margin: 0; }

html, body { height: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Mona Sans Variable', 'Mona Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.stage {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 14px;
  overflow: hidden;
}

/* the whole menu: the button on top, the card file under it (its place is kept when it is closed, so nothing jumps) */
.rolo-menu {
  --w: min(480px, calc(100vw - 28px));
  --h: max(220px, min(350px, calc(100vh - 100px)));
  width: var(--w);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

/* ---- the button: an ink pill with a little card file inside ---- */
.rolo-btn {
  --wdth: 100;
  --wght: 620;
  position: relative;
  height: 60px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0 26px 0 12px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--ink) 82%, #ffffff) 0%, var(--ink) 55%, color-mix(in srgb, var(--ink) 80%, #000000) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), inset 0 -5px 10px rgba(0, 0, 0, 0.28), 0 12px 22px -14px rgba(20, 30, 40, 0.9), 0 2px 4px rgba(20, 30, 40, 0.18);
  color: var(--card);
  font: inherit;
  font-size: 19px;
  font-variation-settings: 'wght' var(--wght), 'wdth' var(--wdth);
  letter-spacing: 0.01em;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: transform 0.3s cubic-bezier(0.3, 1.7, 0.5, 1), filter 0.2s ease;
}

.rolo-btn:active { transform: scale(0.96); }

.rolo-btn:focus-visible {
  outline: 2px solid var(--coral);
  outline-offset: 4px;
}

.rolo-btn__icon {
  width: 42px;
  height: 42px;
  overflow: visible;
}

.rolo-btn__base { fill: #a5683f; }
.rolo-btn__leg { stroke: var(--chrome); stroke-width: 1.6; stroke-linecap: round; fill: none; }
.rolo-btn__card { stroke: rgba(34, 48, 60, 0.35); stroke-width: 0.6; transform-box: fill-box; transform-origin: 50% 100%; }
.rolo-btn__card--back { fill: #e9dfc6; transform: rotateX(46deg); }
.rolo-btn__card--mid { fill: #f3ead3; transform: rotateX(24deg); }
.rolo-btn__card--front { fill: var(--card); }
.rolo-btn__tab { fill: var(--coral); }
.rolo-btn__rod { stroke: var(--chrome); stroke-width: 1.8; stroke-linecap: round; }
.rolo-btn__knob { fill: #0f171e; stroke: var(--chrome); stroke-width: 1; }

.rolo-btn__word {
  display: inline-block;
  min-width: 3.4em;
  text-align: left;
}

/* ---- the card file ---- */
.rolo {
  position: relative;
  width: var(--w);
  height: var(--h);
  container-type: size;
  visibility: hidden;
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}

.rolo__shadow {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 0;
  height: 7cqh;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(40, 26, 14, 0.32), rgba(40, 26, 14, 0));
}

/* the walnut base: a lighter top, a darker front with the grain, and the brass plate */
.rolo__base {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 80%;
  height: 17cqh;
}

.rolo__base-top {
  position: absolute;
  left: 2%;
  right: 2%;
  top: 0;
  height: 30%;
  border-radius: 6px 6px 0 0;
  background:
    repeating-linear-gradient(92deg, rgba(255, 220, 180, 0.08) 0 3px, rgba(60, 30, 10, 0.08) 3px 7px),
    linear-gradient(180deg, color-mix(in srgb, var(--walnut) 70%, #ffffff), color-mix(in srgb, var(--walnut) 88%, #ffffff));
  clip-path: polygon(3% 0, 97% 0, 100% 100%, 0 100%);
}

.rolo__base-front {
  position: absolute;
  inset: 30% 0 0;
  border-radius: 2px 2px 8px 8px;
  background:
    radial-gradient(120% 60% at 30% 40%, rgba(255, 210, 160, 0.12), rgba(255, 210, 160, 0) 60%),
    repeating-linear-gradient(178deg, rgba(30, 12, 2, 0.12) 0 2px, rgba(255, 220, 180, 0.05) 2px 5px, rgba(30, 12, 2, 0.06) 5px 9px),
    linear-gradient(180deg, var(--walnut), color-mix(in srgb, var(--walnut) 70%, #000000));
  box-shadow: inset 0 1px 0 rgba(255, 230, 200, 0.25), inset 0 -3px 6px rgba(0, 0, 0, 0.25);
}

/* the chrome legs, from the hubs down to the base */
.rolo__leg {
  position: absolute;
  top: 63cqh;
  width: 2.4cqw;
  height: 21cqh;
  border-radius: 999px;
  background: linear-gradient(90deg, #7e868f, #ffffff 38%, #b9c0c7 55%, #6c747d);
  transform-origin: 50% 0;
}

.rolo__leg--l { left: 12.8%; transform: rotate(14deg); }
.rolo__leg--r { right: 12.8%; transform: rotate(-14deg); }

/* the drum: every card is a list item turned by the script around the rails */
.rolo__drum {
  position: absolute;
  inset: 0;
}

.rolo__cards {
  position: absolute;
  inset: 0;
  padding: 0;
  list-style: none;
  perspective: var(--persp, 700px);
  perspective-origin: 50% var(--eye, -95%);
}

.rolo__cards > li {
  position: absolute;
  left: 22cqw;
  top: 26cqh;
  width: 56cqw;
  height: 38cqh;
  transform-origin: 50% 100%;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  will-change: transform;
}

.rolo__cards > li.rolo__rail {
  left: 13.5cqw;
  top: calc(64cqh - 1.3cqh);
  width: 73cqw;
  height: 2.6cqh;
  min-height: 5px;
  border-radius: 999px;
  background: linear-gradient(180deg, #ffffff, #a8b0b8 45%, #eef1f4 60%, #6c747d);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
  z-index: 400;
  transform: none;
  will-change: auto;
  pointer-events: none;
}

.card {
  position: absolute;
  inset: 0;
  display: block;
  color: inherit;
  text-decoration: none;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

.card__front,
.card__back,
.card__tab {
  --dim: linear-gradient(rgb(40 28 14 / var(--shade, 0)), rgb(40 28 14 / var(--shade, 0)));
}

.card__front,
.card__back {
  position: absolute;
  inset: 0;
  border-radius: 4px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  opacity: var(--fade, 1);
  background:
    var(--dim),
    radial-gradient(140% 90% at 20% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    var(--card);
  box-shadow: 0 0 0 0.5px rgba(80, 60, 30, 0.28), 0 1px 1px rgba(80, 60, 30, 0.12);
}

.card__back {
  transform: rotateX(180deg);
  background:
    var(--dim),
    linear-gradient(180deg, rgba(40, 28, 14, 0.2), rgba(40, 28, 14, 0) 34%),
    repeating-linear-gradient(180deg, rgba(90, 159, 214, 0) 0 calc(18% - 1px), rgba(90, 159, 214, 0.16) calc(18% - 1px) 18%),
    #f2e9d2;
}

/* the two slots at the bottom of every card, where the rails go through */
.card__front::before,
.card__back::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 2.4cqh;
  width: 46%;
  height: 1.8cqh;
  transform: translateX(-50%);
  background:
    linear-gradient(rgba(60, 44, 20, 0.5), rgba(60, 44, 20, 0.2)) left / 18% 100% no-repeat,
    linear-gradient(rgba(60, 44, 20, 0.5), rgba(60, 44, 20, 0.2)) right / 18% 100% no-repeat;
  border-radius: 1px;
  opacity: 0.4;
}

.card__back::before { bottom: auto; top: 2.4cqh; }

/* the back of a typed card: the studio's stamp, a little crooked */
.card--plain.is-filed .card__back::after {
  content: 'Filed';
  position: absolute;
  right: 9%;
  top: 34%;
  padding: 0.25em 0.6em 0.2em;
  border: 1.5px solid rgba(226, 96, 63, 0.55);
  border-radius: 3px;
  color: rgba(226, 96, 63, 0.6);
  font-size: clamp(8px, 3.6cqh, 12px);
  font-variation-settings: 'wght' 760, 'wdth' 120;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transform: rotate(-7deg);
}

/* the brass paper clip on the chosen divider */
.card__clip {
  position: absolute;
  right: 9%;
  top: -3.6cqh;
  width: 3.6cqh;
  min-width: 10px;
  height: 11cqh;
  border: 2px solid #b98a2a;
  border-radius: 999px;
  box-shadow: inset 0 0 0 1px rgba(255, 236, 170, 0.6), 1px 2px 2px rgba(40, 28, 14, 0.25);
  transform: translateY(-140%) rotate(8deg);
  opacity: 0;
  transition: transform 0.25s ease-in, opacity 0.2s ease-in;
}

.card__clip::after {
  content: '';
  position: absolute;
  left: 22%;
  right: 22%;
  top: 22%;
  bottom: 8%;
  border: 1.5px solid #c99a36;
  border-radius: 999px;
}

.card[aria-current='page'] .card__clip {
  transform: translateY(0) rotate(4deg);
  opacity: 1;
  transition: transform 0.6s cubic-bezier(0.3, 1.8, 0.5, 1) 0.2s, opacity 0.15s linear 0.2s;
}

/* the contact cards: ruled lines, a red head line and words typed on them */
.card--plain .card__front {
  background:
    var(--dim),
    linear-gradient(180deg, rgba(0, 0, 0, 0) 0 23%, rgba(226, 96, 63, 0.55) 23% calc(23% + 1px), rgba(0, 0, 0, 0) calc(23% + 1px)),
    repeating-linear-gradient(180deg, rgba(90, 159, 214, 0) 0 calc(17% - 1px), rgba(90, 159, 214, 0.32) calc(17% - 1px) 17%) 0 23% / 100% 77% no-repeat,
    radial-gradient(140% 90% at 20% 0%, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 55%),
    var(--card);
}

.card__typed {
  position: absolute;
  inset: 0;
  font-family: 'Courier Prime', ui-monospace, monospace;
  font-size: clamp(9px, 4.2cqh, 14.5px);
  line-height: 1;
  color: #2b2f36;
  white-space: nowrap;
}

/* every typed line sits just over its ruled line */
.card__typed span {
  position: absolute;
  left: 8%;
  right: 6%;
  overflow: hidden;
  opacity: 0.84;
}

.card__typed span:nth-child(1) { bottom: 79%; font-weight: 700; color: #1c2129; opacity: 1; }
.card__typed span:nth-child(2) { bottom: 64.4%; }
.card__typed span:nth-child(3) { bottom: 51.3%; }
.card__typed span:nth-child(4) { bottom: 38.2%; }

/* the dividers: coloured card, the tab on top, the word set big and the note under it */
.card--divider .card__front {
  background:
    var(--dim),
    radial-gradient(140% 90% at 20% 0%, rgba(255, 255, 255, 0.32), rgba(255, 255, 255, 0) 55%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.03) 2px 4px),
    var(--tone);
  color: #fffaf0;
}

.card--divider .card__back {
  background:
    var(--dim),
    linear-gradient(180deg, rgba(40, 28, 14, 0.22), rgba(40, 28, 14, 0) 34%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.05) 0 2px, rgba(0, 0, 0, 0.04) 2px 4px),
    color-mix(in srgb, var(--tone) 82%, #3a2a1a);
}

.card__tab {
  position: absolute;
  top: -9cqh;
  left: var(--tab-x, 6%);
  width: 27%;
  height: 9.6cqh;
  border-radius: 5px 5px 0 0;
  background:
    var(--dim),
    linear-gradient(180deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 60%),
    var(--tone);
  box-shadow: 0 0 0 0.5px rgba(60, 40, 20, 0.25);
  display: grid;
  place-items: center;
  overflow: hidden;
}

.card__back .card__tab {
  top: auto;
  bottom: -9cqh;
  border-radius: 0 0 5px 5px;
  background: var(--dim), color-mix(in srgb, var(--tone) 82%, #3a2a1a);
}

.card__tab-word {
  font-size: clamp(8px, min(3.6cqh, 2.4cqw), 12.5px);
  font-variation-settings: 'wght' 680, 'wdth' 78;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fffaf0;
  white-space: nowrap;
}

.card__word {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 22%;
  font-size: clamp(18px, min(12cqh, 8cqw), 42px);
  line-height: 1;
  font-variation-settings: 'wght' var(--word-wght, 720), 'wdth' var(--word-wdth, 112);
  letter-spacing: -0.01em;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18), 0 -1px 0 rgba(255, 255, 255, 0.14);
  white-space: nowrap;
}

.card__note {
  position: absolute;
  left: 8%;
  right: 8%;
  top: 58%;
  padding-top: 2.4cqh;
  border-top: 1px solid rgba(255, 250, 240, 0.55);
  font-size: clamp(9px, min(4.2cqh, 2.9cqw), 14px);
  font-variation-settings: 'wght' 480, 'wdth' 100;
  opacity: 0.92;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* crop marks in the corners, like on a printed proof */
.card--divider .card__word::before,
.card--divider .card__word::after {
  content: '';
  position: absolute;
  top: -1.2cqh;
  width: 2.4cqh;
  height: 2.4cqh;
  border: 0 solid rgba(255, 250, 240, 0.6);
}

.card--divider .card__word::before { left: -4%; border-width: 1px 0 0 1px; }
.card--divider .card__word::after { right: -4%; border-width: 1px 1px 0 0; }

.card:focus-visible .card__front {
  box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px #ffffff;
}

/* ---- the hubs, the knurled knobs and the ratchet pawl ---- */
.rolo__hub {
  position: absolute;
  top: calc(64cqh - 4.6cqh);
  width: 9.2cqh;
  height: 9.2cqh;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #c3c9cf 38%, #7b838c 70%, #b9c0c7 100%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(60, 66, 72, 0.4);
  z-index: 3;
}

.rolo__hub--l { left: calc(13.5% - 4.6cqh); }
.rolo__hub--r { right: calc(13.5% - 4.6cqh); }

/* the knob is a cylinder seen from its side: its knurls run past as the drum turns */
.rolo__knob {
  position: absolute;
  top: calc(64cqh - 7cqh);
  width: 4.6cqw;
  height: 14cqh;
  border-radius: 1.6cqw;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0 20%, rgba(255, 255, 255, 0.28) 32%, rgba(255, 255, 255, 0) 48%, rgba(0, 0, 0, 0.35) 100%),
    repeating-linear-gradient(180deg, #121a21 0 2px, #3a4652 2px 3px, #121a21 3px 5px);
  background-position: 0 0, 0 var(--knurl, 0px);
  box-shadow: 0 3px 5px rgba(0, 0, 0, 0.25), inset 0 0 0 1px rgba(0, 0, 0, 0.4);
  z-index: 4;
  overflow: hidden;
}

.rolo__knob--l { left: calc(13.5% - 4.6cqh - 4.2cqw); }
.rolo__knob--r { right: calc(13.5% - 4.6cqh - 4.2cqw); }

/* the white index mark painted on the knob: it goes round and slips behind */
.rolo__knob-mark {
  position: absolute;
  left: 18%;
  right: 18%;
  top: 50%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: #fbf5e6;
}

.rolo__pawl {
  position: absolute;
  top: calc(64cqh - 7.4cqh);
  right: calc(13.5% + 2.4cqh);
  width: 1.4cqw;
  min-width: 4px;
  height: 5.6cqh;
  border-radius: 999px;
  background: linear-gradient(90deg, #7e868f, #ffffff 40%, #9aa2aa);
  transform-origin: 50% 100%;
  z-index: 3;
}

.rolo__pawl::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -2px;
  width: 7px;
  height: 7px;
  margin-left: -3.5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #8d959e);
}

/* the brass plate on the walnut base */
.rolo__plate {
  position: absolute;
  left: 50%;
  top: 87%;
  min-width: max(160px, 40cqw);
  height: 8.4cqh;
  min-height: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 0 12px;
  white-space: nowrap;
  border-radius: 3px;
  background:
    linear-gradient(100deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.55) 42%, rgba(255, 255, 255, 0) 54%) var(--sheen, -160%) 0 / 300% 100% no-repeat,
    linear-gradient(180deg, #f6dc8c, var(--mustard) 45%, #a77a1c);
  box-shadow: 0 0 0 1px rgba(90, 60, 10, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 1px 2px rgba(0, 0, 0, 0.35);
  color: #4a3208;
  z-index: 5;
}

.rolo__plate::before,
.rolo__plate::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 4px;
  height: 4px;
  margin-top: -2px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff4c8, #8a6414);
}

.rolo__plate::before { left: 3px; }
.rolo__plate::after { right: 3px; }

.rolo__brand {
  font-size: clamp(8px, 3.4cqh, 11px);
  font-variation-settings: 'wght' 700, 'wdth' 125;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.6);
}

.rolo__now {
  position: relative;
  height: 1.3em;
  overflow: hidden;
  font-size: clamp(10px, 4.2cqh, 14px);
  font-variation-settings: 'wght' 640, 'wdth' 100;
  text-shadow: 0 1px 0 rgba(255, 245, 210, 0.6);
}

.rolo__now-word {
  display: block;
  line-height: 1.3;
  white-space: nowrap;
}

@media (hover: hover) {
  .rolo-btn:hover { filter: brightness(1.12); }
}