/* The ink bleed button: a pill of cotton paper on a white page, with a fountain pen over it. The paper and the
   printed words are an SVG at the back, the ink that soaks the paper a canvas over them, and the crown, the grain,
   the pale words, the pen and its shadow an SVG in front. The colours come from here. */
:root {
  --page: #ffffff;          /* the page */
  --paper: #fcf9f2;         /* the paper of the pill */
  --text: #1d1b18;          /* the words printed on the pill */
  --muted: #877f72;         /* the price beside them */
  --ink-dry: #141a30;       /* the ink once it has dried (blue-black) */
  --ink-wet: #2645d4;       /* the ink while it is still wet (blue) */
  --lacquer: #7a1f17;       /* the pen's barrel */
  --gold: #d9b46a;          /* the nib, the clip and the ring */
}

* {
  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(--text);
  font-family: 'Fraunces Variable', Georgia, serif;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
}

.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

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

.ink {
  display: grid;
  justify-items: center;
  text-align: center;
}

/* ---------------------------------------------------------------- the button */
.ink__btn {
  position: relative;
  display: block;
  width: min(320px, calc(100vw - 48px));
  height: 66px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  box-shadow:
    0 1px 1px rgba(60, 46, 24, 0.08),
    0 10px 24px -12px rgba(60, 46, 24, 0.35);
  color: var(--text);
  font: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

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

html[data-using='pointer'] .ink__btn:focus-visible {
  outline: none;
}

/* over the button, the pen takes the place of the pointer */
.ink__btn.is-pen {
  cursor: none;
}

/* the layers: the pen is held above the pill, so the front layer may draw outside it */
.ink__layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

/* ---------------------------------------------------------------- the drawing */
.ink__paper {
  fill: var(--paper);
}

.ink__label {
  font-size: 18px;
  font-weight: 560;
  font-variation-settings: 'opsz' 24;
  letter-spacing: -0.005em;
}

.ink__price {
  font-style: italic;
  font-weight: 400;
}

.ink__label--dark {
  fill: var(--text);
}

.ink__label--dark .ink__price {
  fill: var(--muted);
}

.ink__label--pale {
  fill: var(--paper);
}

.ink__label--pale .ink__price {
  fill: color-mix(in srgb, var(--paper) 70%, var(--ink-dry));
}

.ink__check {
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ink__label--pale .ink__check {
  stroke: var(--paper);
}

/* the drop on the nib and the crown it leaves: wet blue, drying to blue-black */
.ink__drop,
.ink__crown {
  fill: var(--ink-wet);
}

.ink__crown--dry {
  fill: var(--ink-dry);
}

.ink__gloss {
  fill: #fff;
  opacity: 0.7;
}

/* the pen's shadow on the paper */
.ink__shadow {
  fill: rgba(42, 28, 16, 0.2);
  filter: blur(2.4px);
}

/* the pen: lacquered barrel, gold nib, clip and ring */
.ink__barrel {
  fill: url(#ink-lacquer);
}

.ink__lacquer-a {
  stop-color: color-mix(in srgb, var(--lacquer) 55%, #fff);
}

.ink__lacquer-b {
  stop-color: var(--lacquer);
}

.ink__lacquer-c {
  stop-color: color-mix(in srgb, var(--lacquer) 45%, #000);
}

.ink__shine {
  fill: none;
  stroke: rgba(255, 255, 255, 0.4);
  stroke-width: 1.1;
  stroke-linecap: round;
}

.ink__nib,
.ink__clip,
.ink__ring {
  fill: url(#ink-gold);
}

.ink__gold-a {
  stop-color: color-mix(in srgb, var(--gold) 45%, #fff);
}

.ink__gold-b {
  stop-color: var(--gold);
}

.ink__gold-c {
  stop-color: color-mix(in srgb, var(--gold) 50%, #3a2408);
}

.ink__section {
  fill: #1b1918;
}

.ink__slit,
.ink__engrave {
  fill: none;
  stroke: color-mix(in srgb, var(--gold) 35%, #2a1806);
  stroke-width: 0.7;
  stroke-linecap: round;
}

.ink__hole {
  fill: color-mix(in srgb, var(--gold) 35%, #2a1806);
}

.ink__pen {
  filter: drop-shadow(0 1px 0.6px rgba(40, 24, 10, 0.25));
}

/* the grain over everything: a mid tone, so it shows as darker specks on the paper and lighter ones on the ink */
.ink__grain {
  opacity: 0.5;
}